如何在npm中为React项目的src子文件夹配置模块别名？

项目目录结构 #

src/
├── Components/
│   ├── My_component_1/
│   └── My_component_2/
├── Images/
│   ├── image_1
│   └── image_2
└── Pages/
    ├── page_1/
    └── page_2/

根据你使用的构建工具，选择对应的配置方式：

1. Create React App (CRA) 项目 #

CRA默认不暴露Webpack配置，推荐用craco修改配置：

• 安装依赖：

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

• 项目根目录新建craco.config.js：

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

• 修改package.json的脚本命令，替换react-scripts为craco：

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

• （TypeScript项目）在tsconfig.json中添加路径识别：

  {
    "compilerOptions": {
      "baseUrl": "src",
      "paths": {
        "@Components/*": ["Components/*"],
        "@Images/*": ["Images/*"],
        "@Pages/*": ["Pages/*"]
      }
    }
  }
  

2. Vite 项目 #

直接修改Vite配置文件即可：

• 打开vite.config.js（或.ts），添加别名配置：

  import { defineConfig } from 'vite';
  import react from '@vitejs/plugin-react';
  import path from 'path';
  
  export default defineConfig({
    plugins: [react()],
    resolve: {
      alias: {
        '@Components': path.resolve(__dirname, 'src/Components'),
        '@Images': path.resolve(__dirname, 'src/Images'),
        '@Pages': path.resolve(__dirname, 'src/Pages')
      }
    }
  });
  

• （TypeScript项目）同样在tsconfig.json中添加paths配置，和CRA的TS配置一致。

3. 自定义Webpack项目 #

直接修改webpack.config.js：

const path = require('path');

module.exports = {
  // 其他Webpack配置...
  resolve: {
    alias: {
      '@Components': path.resolve(__dirname, 'src/Components'),
      '@Images': path.resolve(__dirname, 'src/Images'),
      '@Pages': path.resolve(__dirname, 'src/Pages')
    }
  }
};

TypeScript项目同样需要在tsconfig.json中配置paths。

别名使用示例 #

配置完成后，即可用别名替代相对路径：

// 原相对路径写法
import component from "../../Components/My_component_1";

// 别名写法
import My_component_1 from '@Components/My_component_1';

如果想使用import { My_component_1 } from '@Components'的写法，需要在Components文件夹下创建index.js（或index.ts）统一导出组件：

// src/Components/index.js
export { default as My_component_1 } from './My_component_1';
export { default as My_component_2 } from './My_component_2';

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