npm react.js create-react-app完整配置别名alias方法

在使用 create-react-app 创建的项目中配置路径别名，可以使用 react-app-rewired 这个库来覆盖 create-react-app 的默认配置。以下是配置步骤和示例：

在项目根目录中安装 react-app-rewired：

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

在项目根目录中创建一个 config-overrides.js 文件，用于自定义配置。

在 config-overrides.js 文件中，使用 paths.alias 配置别名：

const path = require('path');

function resolve(dir) {

return path.join(__dirname, '.', dir);

}

module.exports = function override(config, env) {

// 配置别名

config.resolve = {

...config.resolve,

alias: {

...config.resolve.alias,

'@components': resolve('src/components'),

// 添加更多别名

},

};

return config;

};

修改 package.json 中的启动脚本，使用 react-app-rewired 代替 react-scripts 启动项目：

"scripts": {

"start": "react-app-rewired start",

"build": "react-app-rewired build",

"test": "react-app-rewired test",

// ...

}

现在，你可以在项目中使用配置的别名来导入模块了，例如：

import SomeComponent from '@components/SomeComponent';

这样，@components/SomeComponent 就会被解析为 src/components/SomeComponent 文件。

精彩链接