在create-react-app中配置ES6导入模块别名的替代方案及IDE支持

问题背景 #

在Angular中可轻松将相对路径导入改写为别名形式，例如：
原导入语句：

import { ProgressBar } from '../../common';

改写为别名导入：

import { ProgressBar } from '@common';

现在希望在Create React App（CRA）项目中实现同样功能，但不想使用eject修改配置，也不想安装craco等第三方工具，询问是否存在第三种方案；同时想了解JetBrains IDE在重构/优化导入时能否识别这类模块别名。

解决方案：无需eject或第三方工具的配置方式 #

存在第三种方案，只需通过项目的配置文件实现，无需修改webpack核心配置或安装额外工具：

1. 针对JavaScript项目 #

在项目根目录创建jsconfig.json文件，添加以下配置：

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

2. 针对TypeScript项目 #

直接修改项目自带的tsconfig.json文件，在compilerOptions中添加baseUrl和paths配置：

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "@common/*": ["common/*"]
    },
    // 保留原有其他配置项
  },
  "include": ["src"]
}

• baseUrl指定路径解析的基准目录为src，所有别名路径都基于此目录
• paths中@common/*为自定义别名，映射到实际的src/common/*目录（可根据你的目录结构调整映射规则）

配置完成后，即可直接使用import { ProgressBar } from '@common';这类别名导入语句，CRA的webpack构建流程会自动识别并解析这些路径。

JetBrains IDE对模块别名的支持 #

JetBrains系列IDE（如WebStorm、IntelliJ IDEA）完全可以识别通过jsconfig.json或tsconfig.json配置的模块别名：

• 代码编写时会提供别名路径的自动补全
• 重构代码（如重命名目录、文件）时，别名导入语句会同步更新
• 使用「优化导入」功能时，IDE会自动将冗长的相对路径替换为配置好的别名，也能正常识别别名路径进行代码跳转

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