【问题标题】：create-react-app Typescript 3.5, Path Aliascreate-react-app Typescript 3.5，路径别名
【发布时间】：2019-11-25 22:41:13
【问题描述】：

我正在尝试通过将这些值添加到 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 不支持？

【问题讨论】：

你使用自定义 webpack 吗？
是的，我确实使用 react-app-rewired 来自定义 webpacks

标签： typescript create-react-app

【解决方案1】：

就我而言，我使用craco 和craco-alias 解决了这个问题

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

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

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

在tsconfig.json 中扩展tsconfig.paths.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"

【讨论】：

然后你应该可以使用例如：import Bla from '@components/Bla';?我在./components/Bla.tsx 创建了一个文件。
我把你的步骤变成了一个脚本：pastebin.com/KkPUjZBU 加上我上面的评论。不幸的是，Can't resolve '@components/Bla' 失败了。我是不是搞错了？
您是否在 src 目录中创建了 components 目录？如果没有，您需要更改配置中的绝对路径"baseUrl": "./src"
或61行cat > components/Bla.tsx更改cat > src/components/Bla.tsx
啊，明白了，谢谢。是的，我正在尝试在 src 之外创建一个组件包。我会尝试编辑"baseUrl"。

【解决方案2】：

craco 或 rewired create-react-app 的别名解决方案是 react-app-rewire-alias，系统为：craco、react-app-rewired、customize-cra p>

根据上述系统的文档，将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)
}

Craco 用户配置略有不同：

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

module.exports = {plugins: [{
  plugin: CracoAliasPlugin,
  options: {alias: configPaths('./tsconfig.paths.json')}
}]}

像这样在 json 中配置别名：

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

并将此文件添加到主要打字稿配置文件的extends 部分：

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

【讨论】：

react-app-rewire-alias 还需要你修改 package.json 中的 npm 脚本。如果有人感兴趣，这是我的代码示例：github.com/GW-Web-Enterprise/ReactJS/commit/…。此代码示例删除了 baseUrl 编译器选项，并且仍然保留了 src/* 根目录中文件的相对导入，以防止任何混淆，例如从 'src/routes' 导入路由而不是从 './routes' 导入路由。因为“src”可能会让你认为有一个名为“src”的外部 NPM 包
它可以编译，但在 vscode 中无法解析
似乎 "Not resolve in vscode" 与 react-app-rewire-alias 或 creact-react-app 等无关。检查什么是 (ts/js)config.json - 可能是它或 vscode 选项有问题。

【解决方案3】：

编辑 - 20/3/20 - 以上答案有一个插件解决方案。

遇到了同样的问题。在发布时，它目前不受支持。

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）。

【讨论】：

【解决方案4】：

路径别名在 tsconfig.json 中不再起作用

您可以这样做，直接导入相对于src 目录的文件

转到您的 tsconfig.json 文件添加基本 URL 为 "."

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

那么你可以直接从src目录导入东西

import Myfile from "src/myfile.js"

【讨论】：

这里的问题是 VS Code 将导入行高亮显示为错误，因为它无法建立连接。

【解决方案5】：

这是一篇旧帖子，但我发现了一个仅使用 package.json 功能的极其简单的解决方案。

"dependencies": {
  "@yourAlias": "file:./path/to/your/folder"
}

它适用于 node.js 和 webpack 项目

【讨论】：

至少它看起来有效:)
你能详细说明你是怎么做到的吗？它似乎对我不起作用！
@Thijmen 来自我所做的测试，这适用于使用 require 的 node.js 和使用 import 的 webpack。这不适用于使用导入的 node.js。这是你的情况吗？
我最终设法让它工作，正如@Иван Яковлев 的评论所示！

【解决方案6】：

@oklas。我已经在 config-overrides.js 中使用以下内容解决了，这与上面的相同。但是非常感谢您分享这个答案：

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

module.exports = function override(config) {
  alias({
    ...configPaths("base-tsconfig.json"),
  })(config);
  return config;
};

【讨论】：

感谢这个工作只需要添加 base-tsconfig.json 路径！使用 React 16.13.1 进行测试

【解决方案7】：

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

上述设置本质上允许通过 craco 覆盖内置 webpack 配置来扩展 CRA，并且还允许 CRA 代码直接引用单存储库中外部/共享包中的 typescript 文件。

【讨论】：