React脚手架配置别名（非eject）

原文地址： http://www.linzichen.cn/article/1580763532192907264

前言

之前在用 react 脚手架 create-react-app 写项目时，发现在引入自定义组件或 js 的时候，不能够像 vue 似的通过别名 @ 来引入，如果涉及层级过深，那么一堆的相对路径 ../../ 也是颇为头痛，且及不雅观。

使用create-react-app 初始化项目，不会有 webpack的配置项。如果想手动修改配置，需要通过react-script eject 把 webpack 的配置文件分解到 config 文件夹，此过程是不可逆的。如果只是修改一些简单的配置，则推荐使用第三方依赖 react-app-rewired，其作用是帮助我们重写 react 脚手架的配置。

通过 rewired 修改路径别名

安装 react-app-rewired

npm install react-app-rewired --save-dev

创建 config-overrides.js 文件

在项目根目录下创建一个 config-overrides.js 文件

+-- your-project
|   +-- config-overrides.js
|   +-- node_modules
|   +-- package.json
|   +-- public
|   +-- README.md
|   +-- src

提供路径配置：

const path = require('path');
function resolve(dir) {
    return path.join(__dirname, '.', dir)
}
module.exports = function override(config, env) {
    config.resolve.alias = {
        '@': resolve('src')
    }
    return config;
}

替换 package.json 中 scripts 执行部分

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

注意：不用替换 eject 部分。工具中没有针对 eject 的配置替换，执行了 eject 命令会让工具失去作用。

至此，就可以在项目中使用别名 @ 来代表 scr 路径了。

其他配置

更多详细配置可参考官方github地址：
react-app-rewired