create-react-app项目，自定义别名方案三：customize-cra

我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

关于在基于webpack的react cra项目中，使用@这个alias配置的问题。本文描述第三种方案，主角的名字是customize-cra+react-app-rewired。

苏南大叔的“程序如此灵动”博客，记录苏南大叔的代码编程经验总结。本文测试环境：nodejs@20.18.0，create-react-app@5.0.1，react@19.0.0，customize-cra@1.0.0，react-app-rewired@2.2.1。实现这个别名alias的方案很多，核心就是如何修改webpack配置，并生效的问题。本文使用customize-cra+react-app-rewired方案。

customize-cra + react-app-rewired

customize-cra 是一个用于自定义create-react-app配置的库。但是，单独使用这个库，经过实践检验，并不能生效，必须搭配react-app-rewired。

执行命令：

create-react-app test
cd test
npm i customize-cra react-app-rewired --save-dev

删除无用文件

cd src
rm -r App.test.js reportWebVitals.js setupTests.js
code index.js

修改配置

config-overrides.js:

const { override, addWebpackAlias } = require('customize-cra');
const path = require('path');
module.exports = override(
  addWebpackAlias({
    "@": path.resolve(__dirname, "src"),
    '@utils':  path.resolve(__dirname, "src/utils"),
    // 添加更多别名
  }),
  // 添加更多自定义配置
);

或者：

const path = require('path')
function resolve(dir) {
  return path.join(__dirname, '.', dir)
}
module.exports = function override(config, env) {
  config.resolve.alias = {
    '@': resolve('src'),
    '@utils': resolve('src/utils'),
  }
  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",
  "eject": "react-scripts eject"
}

测试效果

import App from '@/App';

测试成功。

相关文章

• https://newsn.net/say/react-alias.html
• https://newsn.net/say/react-alias-craco.html

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。