创建新的 TypeScript React 应用程序时不再支持别名导入

Question

我通过此命令使用react@17.0.2和创建了一个新的 React-typescript 应用程序typescript@4.5.2：

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 找不到模块：无法解析 .......* 中的“组件”

于是我开始搜索这个问题来解决它。我发现了很多方法，我将在下面提到其中一些：

1.转到您的jsconfig.json文件并将基本 URL 添加为“.”

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

然后就可以直接从src目录导入东西了

import Myfile from "src/myfile.js"

结果==> 不起作用！

2、这个问题通过别名重新布线解决。安装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包

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

我能够在几天前创建的 Typescript CRA 中使其协同工作（typescript + 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

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

网络包

创建新文件或添加到现有文件webpack.config.js

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

埃斯林特

最后.eslintrc.json

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