創建新的 typescript 反應應用程序時不再支持別名導入

Question

我通過這個命令使用react@17.0.2和typescript@4.5.2創建了一個新的 React-typescript 應用程序：

npx create-react-app my-app --template typescript

然后我決定像以前一樣定義別名路徑。 我在我的應用程序的根目錄中創建了tsconfig.paths.json 。

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

然后我將extend屬性添加到tsconfig.json文件中：

{
  "extends": "./tsconfig.paths.json",
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

另外，我安裝了react-app-rewired@2.1.8並創建了config-override.js ：

const path = require('path');

module.exports = function override(config) {
    config.resolve = {
        ...config.resolve,
        alias: {
            ...config.alias,
            'components': path.resolve(__dirname, 'src/components/*'),
            'routes': path.resolve(__dirname, 'src/routes/*'),
            'constants': path.resolve(__dirname, 'src/constants/*'),
        }
    }
    return config;
}

所以我重新打開了我的 IDE （VSCode）並運行npm start 。 我必須提到我在運行啟動命令之前更改了package.json中的腳本。

{
 .
 .
 .
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
  }
 .
 .
 .
}

運行 start 命令后，終端顯示此消息，編譯失敗：

正在對您的 tsconfig.json 文件進行以下更改： -compilerOptions.paths 不得設置（不支持別名導入）

*編譯失敗。

./src/App.tsx Module not found: Can't resolve 'components' in.......*

所以我開始搜索這個問題來解決它。 我發現了許多方法，我將在下面提到其中的一些：

1. Go 在您的jsconfig.json文件中添加基礎 URL 為“.”

"compilerOptions": {
   "baseUrl": ".",
   ...

然后就可以直接從src目錄導入東西了

import Myfile from "src/myfile.js"

結果 ==> 無效！

2.這個問題通過rewire的別名解決。 安裝react-app-rewire-alias然后創建config-override.js文件：

     const {alias, configPaths} = require('react-app-rewire-alias')

     module.exports = function override(config) {
      alias(configPaths())(config)
      return config
     }

結果 ==> 無效！

3.使用craco@6.4.1 package

1. 安裝craco和craco-alias npm install @craco/craco --save和npm i -D craco-alias

2. 在根目錄下創建tsconfig.paths.json

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

3. 在tsconfig.paths.json中擴展tsconfig.json

   { "extends": "./tsconfig.paths.json", //默認配置... }

4. 在根目錄下創建craco.config.js

    const CracoAlias = require("craco-alias"); module.exports = { plugins: [ { plugin: CracoAlias, options: { source: "tsconfig", // baseUrl SHOULD be specified // plugin does not take it from tsconfig baseUrl: "./src", /* tsConfigPath should point to the file where "baseUrl" and "paths" are specified*/ tsConfigPath: "./tsconfig.paths.json" } } ] };

5. 在package.json中交換"start": "react-scripts start"與"start": "craco start"

結果 ==> 無效！

我很困惑，因為我之前多次使用過別名路徑，但現在它不起作用。 我不想eject我的應用程序，但使用別名路徑很有幫助。

Answer 1

這是一個解決方法

不再支持路徑別名。

但是為了避免煩人的導入路徑，比如../../../你可以直接導入相對於src目錄的文件

您可以執行以下操作

go 到您的tsconfig.json文件添加基礎 URL 為"."

"compilerOptions": {
    "baseUrl":".",
    ...

然后你可以直接導入相對於src目錄的東西

import utility from "src/Myfile.js"

Answer 2

我能夠使它在幾天前創建的 Typescript CRA 中一起工作（打字稿 + eslint）。 我是這樣做的：

從package.json選擇的部門：

# react: 17.0.2
# eslint: 8.6.0
# react-scripts: 5.0.0
# eslint-import-resolver-babel-module 5.3.1

安裝模塊解析器

yarn add eslint-import-resolver-babel-module --dev

配置

tsconfig

我沒有任何tsconfig.paths.json

// tsconfig.json
{
  "compilerOptions": {
    //...youCompilerOptions
    "baseUrl": "src"
  },
  "include": ["src"]
}

webpack

創建新文件或添加到現有webpack.config.js

// webpack.config.js
module.exports = {
  resolve: {
    extensions: ["ts", "tsx", "js", "jsx"],
    alias: {
      components: path.resolve(__dirname, "src/components"),
    },
  },
};

埃斯林特

最后.eslintrc.json

// .eslintrc.json
{
  // ...yourConfig
  "settings": {
    "import/resolver": {
      "node": {
        "paths": ["src"],
        "moduleDirectory": ["node_modules", "src"],
        "alias": {
          "components": "./src/components"
        }
      }
    }
  },
}