Create React App项目中JS与TS文件共用路径别名解决方案

在Create React App（CRA）项目里，只靠tsconfig.json的paths配置无法让JavaScript文件识别路径别名——原因是tsconfig的paths仅用于TypeScript类型检查和编辑器代码提示，webpack编译JS文件时并不会读取这个配置。要让JS和TS文件都能正常使用别名，需要同时配置编辑器识别和webpack编译解析两部分，具体方案如下：

方案一：使用Craco修改webpack配置 #

Craco是CRA的常用配置覆盖工具，步骤简单直接：

1. 安装依赖

npm install @craco/craco --save-dev
# 或 yarn add @craco/craco --dev

2. 在项目根目录创建craco.config.js，配置webpack别名规则

const path = require('path');

module.exports = {
  webpack: {
    alias: {
      '@': path.resolve(__dirname, 'src/'),
    },
  },
};

3. 修改package.json中的启动脚本，替换react-scripts为craco

{
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test"
  }
}

方案二：使用react-app-rewired + customize-cra #

如果习惯用react-app-rewired，也可以用这套组合实现配置覆盖：

1. 安装依赖

npm install react-app-rewired customize-cra --save-dev
# 或 yarn add react-app-rewired customize-cra --dev

2. 在项目根目录创建config-overrides.js

const { override, addWebpackAlias } = require('customize-cra');
const path = require('path');

module.exports = override(
  addWebpackAlias({
    '@': path.resolve(__dirname, 'src/'),
  })
);

3. 修改package.json的启动脚本

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

后续配置注意事项 #

• 保留你现有的tsconfig.json配置即可，其中allowJs: true会让TypeScript处理JS文件，编辑器会读取paths提供别名提示，无需再保留jsconfig.json。
• 若项目使用ESLint，需要在.eslintrc.js中添加别名解析配置，避免ESLint报错：

module.exports = {
  // ...其他配置
  settings: {
    'import/resolver': {
      node: {
        paths: ['src'],
        alias: {
          '@': './src',
        },
      },
    },
  },
};

• 修改配置后，重启开发服务器和编辑器，确保配置生效。

内容的提问来源于stack exchange，提问作者Fractal Cabbage