react 脚手架创建项目,配置别名
最编程
2024-04-24 21:53:02
...
React脚手架项目使用 react-scripts
封装了webpack配置,所以我们需要通过 config-overrides
或者 eject
的方式来修改webpack配置
可以的话 ,创建项目的时候可以使用vite ,我这是老项目屎山 懒得迁移 ,但还得改呀
## 1. 安装依赖 :
npm install react-app-rewired customize-cra --save-dev
## 2. 根目录创建一个 config-overrides.js
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
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
}
## 结语 : 可以在React脚手架项目中成功配置别名 @
,将其指向 src
目录
推荐阅读
-
react 脚手架创建项目,配置别名
-
用五分钟时间向您展示 React 如何实现项目主题颜色的全局配置
-
如何在 React 项目中创建令人惊叹的动画翻转卡效果
-
objectARX 环境配置指南 VS2019+AutoCad2023(在 VS 中创建 ARX 项目的指南)
-
在 Coding 上创建项目,将代码从 IDEA 提交到 Coding 上的代码库,下载 Git,在 IDEA 上配置 Git。
-
使用 yarn 从头开始开发 react 项目(配置和开发基础知识)(面向初学者)
-
从零到一的nvm、npm、cnpm、yarn、vue全套安装和环境配置以及创建新项目和如何运行人的项目大全,最详细,保姆级
-
vue3 使用 rem 创建 h5 项目以实现响应式配置
-
前端搭建指南:调试本地开发环境的实用技巧 - 在CLI脚手架项目里,别忘了添加库文件及其版本依赖 1. 实时联动与修改: a) 首先确保在当前CLI脚手架项目的`package.json`依赖中加入所用库文件及其正确版本。 b) 通过npm link在本地创建硬连接,使得库与项目能实时修改、同步。运行如下命令: ``` $ cd your-lib-dir $ npm link $ cd your-cli-dir $ npm link your-lib ``` 2. 模拟部署环境: 当需测试线上环境时,解除本地软链接。回到库文件目录并执行: ``` $ cd your-lib-dir $ npm unlink ``` 同样,在CLI项目目录执行: ``` $ cd your-cli-dir $ npm uninstall your-lib --save ``` 注意此时可能会出现因缺少库文件依赖导致的错误,但可暂且忽略,这样能避免将来遗漏或重复安装的问题。 3. 发布后的操作: 如果库已上线,可先清空CLI项目的`node_modules`目录(`rm -rf node_modules`),然后重新安装所有依赖: ``` $ npm install ``` 通过以上步骤,您就能顺畅地调试和部署您的脚手架项目了。 总结 `link` & `unlink` 命令的运用: 1. `npm link`:在本地创建硬连接,便于实时协作与同步。 2. `npm unlink`:模拟线上环境并解除软链接,为正式部署做准备。
-
入门React:创建你的第一个项目