React Type script絶対パスの設定(Craco)

3802 ワード

React typescript テキストリンク

Goal
cracoで作成したプロジェクトで絶対パスを設定する方法について説明します.
CRA+Typescript絶対パスの設定
フォルダ構造が複雑な場合、相対パスimportを使用すると、コードが長すぎて表示しにくくなります.

import Button from "../../../../button" 
// 이런식으로 되어있다면 찾기도 원하는 파일을 찾는 것도 힘들것이고 보기 어렵다.

Craco(Create Resact App Configuration Override)は、ルートフォルダにejectを追加することで、eslint、babel、postcssなどを簡単に設定できます.
端末では、cracoパッケージをインストールするには、次のコマンドを使用します.

$ yarn add @craco/craco
$ yarn add craco-alias -D

Craco.config.js

const CracoAlias = require("craco-alias");

module.exports = {
  plugins: [
    {
      plugin: CracoAlias,
      options: {
        source: "tsconfig",
        tsConfigPath: "tsconfig.paths.json",
      },
    },
  ],
};

前述したように、craco.config.jsファイルを設定した後、craco.config.jsおよびtsconfig.jsonファイルを設定すれば終了する.
tsconfig.json

{ 
  ...,
  "extends": "./tsconfig.paths.json"
}

tsconfig.paths.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@components/*": ["src/components/*"],
    }
  }
}

Reference

この問題について(React Type script絶対パスの設定(Craco)), 我々は、より多くの情報をここで見つけました https://velog.io/@alstnsrl98/React-Typescript-절대-경로-설정하기-Craco

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

Failed to load libGL.so問題解決

JAVA構文#1