如何在React或Next.js中使用绝对路径替代相对路径优化导入写法

要实现import MyComponent from '@components/MyComponent'这种短路径导入，可根据你的项目技术栈选择对应配置方案： #

方案1：仅在package.json中配置（原生支持） #

如果你的项目构建工具版本较新（Node.js 14.13.0+、Webpack 5+、Vite 2+均默认支持），可以直接在package.json中添加imports字段实现别名配置：

{
  "name": "your-react-project",
  "version": "1.0.0",
  // 新增别名配置
  "imports": {
    "@components/*": "./src/components/*",
    "@utils/*": "./src/utils/*",
    "@hooks/*": "./src/hooks/*"
  }
}

配置完成后即可直接使用别名导入，无需修改其他构建配置。 #

方案2：搭配构建工具额外配置 #

如果构建工具版本较低，或者需要更灵活的别名规则，可搭配对应构建工具配置：

2.1 Create React App（CRA）项目 #

• 未执行eject操作的场景推荐用craco覆盖配置：
  1. 安装依赖：npm install @craco/craco --save-dev
  2. 项目根目录新建craco.config.js，添加以下内容：

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

  3. 修改package.json中的scripts命令，把react-scripts替换为craco：

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

• 已经执行过eject操作的场景，直接修改config/webpack.config.js中的resolve.alias字段即可。

2.2 Vite 项目 #

修改根目录的vite.config.js/vite.config.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/')
    }
  }
})

可选：IDE识别配置 #

为了让VSCode等IDE正确识别别名、提供代码提示，需要在项目根目录新增jsconfig.json（JS项目）或者tsconfig.json（TS项目）：

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

注意事项 #

• 所有配置修改完成后，需要重启开发服务才会生效
• 别名命名尽量不要和已发布的npm包重名，避免导入冲突
• 如果项目配置了eslint，需要安装eslint-import-resolver-alias插件并配置对应规则，避免eslint报导入路径错误

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