Question

我试图通过将以下值添加到tsconfig.json中来设置项目中的路径别名：

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

如果我创建导入，则IntelliJ或VSCode都不会打扰我：

import { AppState } from '@store/index';

但是当我编译应用程序时，我收到以下警告：

The following changes are being made to your tsconfig.json file:
  - compilerOptions.paths must not be set (aliased imports are not supported)

炸弹说找不到参考：

TypeScript error in C:/xyz.tsx(2,26):
Cannot find module '/store'.  TS2307

有没有解决方法，或者create-react-app --typescript不支持它？

Answer 1

就我而言，我使用craco和craco-alias

解决了此问题

安装craco和craco-alias npm install @craco/craco --save和npm i -D craco-alias

在根目录中创建tsconfig.paths.json

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

在tsconfig.paths.json中扩展tsconfig.json

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

在根目录中创建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"
          }
       }
    ]
  };

package.json

与"start": "react-scripts start"交换"start": "craco start"

Answer 2

这可以通过 react-app-rewire-alias （对于react-app-rewired或customize-cra或craco）解决：

根据文档，将react-scripts中的package.json替换并配置下一个：

// config-overrides.js
const {alias, configPaths} = require('react-app-rewire-alias')

module.exports = function override(config) {
  return alias(configPaths('./tsconfig.paths.json'))(config)
}

像这样在json中配置别名：

// jsconfig.paths.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "example/*": ["example/src/*"],
      "@library/*": ["library/src/*"]
    }
  }
}

并在主打字稿配置文件的extends部分中添加此文件：

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

Answer 3

有同样的问题。目前不支持。

CRA团队仍在开发此功能： https://github.com/facebook/create-react-app/pull/6116

如果您编辑tsconfig CRA，则会删除更改：https://github.com/facebook/create-react-app/issues/6269

此线程中有一些技巧：https://github.com/facebook/create-react-app/issues/5118要使别名正常工作，但是需要对CRA设置进行自定义，这不适合我的用例（按原样使用CRA）。

Answer 4

@oklas.
I've resolved using the following in config-overrides.js which is same as above. But Thanks a lot for sharing this answer                                                                               

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

 module.exports = function override(config) {

 alias({
   ...configPaths('base-tsconfig.json')
 })(config)
 return config
 } `

Answer 5

尝试将别名添加到您的webpack配置。像这样的东西。

{
  resolve: {       
    alias: {
      @store: path.resolve(__dirname, '../store/'),          
    },
  },
}

Answer 6

还使用了ts-loader和craco来解决此问题-此处描述：https://stackoverflow.com/a/63545611/10813908

声明的设置实质上允许通过craco覆盖内置的webpack配置来扩展CRA，还允许CRA代码直接引用mono-repo中外部/共享包中的打字稿文件。

create-react-app Typescript 3.5，路径别名

6 个答案: