如何在 2022 年在 CRA TypeScript 中创建路径别名？答案

【问题标题】：How to make a path alias in CRA TypeScript in 2022?如何在 2022 年在 CRA TypeScript 中创建路径别名？
【发布时间】：2023-01-17 06:11:00
【问题描述】：

我刚刚启动了 CRA npx create-react-app my-app --template typescript，我想在调用组件时创建一个别名，例如：

import components from '@components'

其中组件位于src/components。

我尝试通过添加以下内容在tsconfig.json 中进行配置：

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

同样在webpack.config.js中添加：

// const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin')
const path = require('path')

module.exports = {
  resolve: {
    // plugins: [new TsconfigPathsPlugin()],
    alias: {
      '@utils': path.resolve(__dirname, './src/utils/'),
      '@utils/*': path.resolve(__dirname, './src/utils/*')
    }
  }
}

但它仍然不起作用。

任何人都可以帮我解决这些问题吗？但是，我不会使用其他库，例如@craco/craco。

【问题讨论】：

标签： reactjs webpack create-react-app react-typescript

【解决方案1】：

问题是 CRA 在后台使用自己的 Webpack 配置。简单地创建一个新的 webpack.config 文件实际上并没有将 CRA 指向它，除非你运行npm run eject。

这样做是不可逆的，但会将配置文件添加到您的项目中。从那里，您应该能够修改构建设置以满足您的需要。

提醒一下，这在您的项目中无法撤消，除非可能是 git 重置，并且可能超出您的预期。

这个别名问题似乎是known one。人们之前认为可行的事情似乎不再有效或不再受支持。有些人猜测这可能与最近将 Webpack 更新到版本 5 有关。虽然有些人声称 craco 不适合他们，但我能够以最少的成本让它在全新的 CRA 应用程序中工作变化。我知道你对此不感兴趣，所以我不会在这里发布。

或者，CRA 允许通过 src baseUrl 使用 absolute imports。这会将 VSCode 和 Webpack 都指向您的最终文件，但您将无法设置自定义路径。

"baseUrl" : "."

使用多个index.ts 文件并将嵌套代码导出到目录中的最高级别，我能够使导入路径与别名一样短：

import { persistor, store } from "src/state-management";

这对你来说可能已经足够了。如果没有，请考虑添加一个包来覆盖 CRA 的某些 Webpack 设置，或者弹出并自行解决问题。

【讨论】：