前言:
对于命令: create-react-app 创建的项目默认使用的是 react-scripts(存在于node_modules文件夹中)来处理开发服务器和构建,它内置了一些webpack相关配置。而 craco(Create React App Configuration Override)是用来定义和覆盖由 create-react-app 内置配置的插件。而想要更好的配置我们的webpack不需要每次修改都去react-scripts中修改的话,则可以使用该插件会更加的方便,目前npm官网中也在持续的更新迭代到7.x版本了。
一、使用的原因:
由于我在搭建项目时,使用 create-react-app 创建的react项目中引入文件时往往必须使用'../'、'./' 来进行,当然有的小伙伴会说:“你好蠢哦,不知道去react-scripts/config中的webpacke文件去配置alies嘛?”。当然这是一种方式(具体实现在后文会体现),这时我们可以使用“@”符号代替“src”目录,但细心的人会发现该项目不像umi或next创建的会有vs code提示选项,往往需要手动输入才行,这这...,像我这么懒的人,打死都不想输入啊!!!于是便有了该文章。
二、react-scripts默认配置“@”
先来说说不使用craco插件时如何默认配置“@”,前提条件使用如下命令创建的项目:
create-react-app 文件名
- 找到项目中node_modules文件夹
- 打开此文件夹找到react-scripts -> config -> webpack.config.js 文件打开找到 alies 属性
- 在 alies 属性中添加如下代码后重启项目即可生效
"@": path.resolve('src')
以上方式缺点:vscode提示器不生效,一旦本地node_modules 文件被删除,重新下载node_modules依赖则会被重置掉。
三、craco 插件使用
为了解决上述方式的缺点,使用craco插件能快速解决。
1、craco简介:
craco(Create React App Configuration Override)用来自定义由 create-react-app 创建的项目内部配置,比如修改 webpack 配置,覆盖react-scripts的默认设置等等....
2、craco使用:
2.1 安装:
npm install @craco/craco react-app-rewire-alias(建议安装在dependencies中)
2.2 配置:
由于现在使用craco插件进行配置,所以上述在 react-scripts中默认配置可以去除。
首先,在项目根目录下创建 craco.config.js 文件,并且在package.json文件中修改一些配置如下:
- craco.config.js 文件配置
const path = require("path");
const { CracoAliasPlugin } = require("react-app-rewire-alias");
module.exports = {
// webpack 配置
webpack: {
// 更改build打包文件名称为dist
configure: (webpackConfig, { env, paths }) => {
webpackConfig.output.path = path.resolve(__dirname, "dist");
paths.appBuild = path.resolve(__dirname, "dist");
return webpackConfig;
},
},
// 配置别名
plugins: [
{
plugin: CracoAliasPlugin,
options: {
"@": path.resolve(__dirname, "src"),
},
},
],
};
- 在package.js 文件配置
// 将如下模块代码
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
// 换成
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "react-scripts eject"
},
以上配置完成后重启项目,会发现“@”符号可以正常使用但vsCode编辑器并没有提示框出现
- 在根目录下创建jsconfig.json 文件配置
{
"compilerOptions": {
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
},
"exclude": ["node_modules", "dist"]
}
此时重启项目生效
此时其他配置webpack操作我们都可以在craco.config.js文件中进行,比如设置代理、优化打包等等配置