react脚手架创建项目,配置别名(alias)

React脚手架项目使用 react-scripts 封装了webpack配置,所以我们需要通过 config-overrides 或者 eject 的方式来修改webpack配置

可以的话 ,创建项目的时候可以使用vite ,我这是老项目屎山 懒得迁移 ,但还得改呀

1. 安装依赖 :

复制代码
npm install react-app-rewired customize-cra --save-dev

2. 根目录创建一个 config-overrides.js

javascript 复制代码
const { override, addWebpackAlias } = require('customize-cra');
const path = require('path');

module.exports = override(
  addWebpackAlias({
    ['@']: path.resolve(__dirname, 'src')
  })
);

3. 修改 package.json 中的 scripts,将原本的 react-scripts 替换为 react-app-rewired

javascript 复制代码
"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
}

结语 : 可以在React脚手架项目中成功配置别名 @,将其指向 src 目录

相关推荐
wuhen_n1 分钟前
组件测试策略:测试 Props、事件和插槽
前端·javascript·vue.js
Jiude1 分钟前
Skill + MCP + Linear 自动化工作流:让 AI 包揽变更日志工作
前端·架构·cursor
zhensherlock3 分钟前
Protocol Launcher 系列:Pika 取色器的协议控制(上篇)
前端·javascript·macos·typescript·github·mac·view design
蚂蚁家的砖4 分钟前
基于 Vue 3 + Cesium 的 DJI 无人机航线规划系统技术实践
前端·无人机
inksci6 分钟前
推荐动态群聊二维码制作工具
前端·javascript·微信小程序
wuhen_n6 分钟前
Vue3 单元测试实战:从组合式函数到组件
前端·javascript·vue.js
郑州光合科技余经理2 小时前
海外O2O系统源码剖析:多语言、多货币架构设计与二次开发实践
java·开发语言·前端·小程序·系统架构·uni-app·php
arvin_xiaoting7 小时前
OpenClaw学习总结_I_核心架构_8:SessionPruning详解
前端·chrome·学习·系统架构·ai agent·openclaw·sessionpruning
工程师老罗8 小时前
Image(图像)的用法
java·前端·javascript
早點睡3908 小时前
ReactNative项目OpenHarmony三方库集成实战:react-native-swiper
javascript·react native·react.js