更漂亮的创建reactApp开发环境配置craco

出身背景

对于使用CRA脚手架创建的项目，如果您想修改编译配置，通常可以选择npm run eject弹出配置，然后神奇地修改它。然而，弹出是一个不可逆的操作。配置弹出后，您无法按照官方步骤升级项目的act脚本版本。

如果您想在不弹出的情况下重写CRA配置，当前的成熟方法如下

使用CRA正式支持的--scripts版本参数，您可以在创建项目时使用自己的重写act脚本包

使用+组合覆盖配置

使用覆盖配置

第二种方法比第三种方法稍微复杂一些。我对此有很好的理解，我们注意到最新的官方建议也开始了。我们还在等什么？我们今天将在这里详细讨论使用方法，以便提供更好的建议。

配置步骤

首先，使用createreactApp创建一个项目。这里我们把它命名为我的项目

npx创建reactApp我的项目

输入项目目录并安装基本依赖项

yarn add antd@craco/craco-craco-less@babel/plugin建议装饰器babel-plugin导入-D

3.修改package.json中的脚本

｛“scripts”：｛“start”：“set PORT=5000&craco start FAST_REFRESH=true”，“build”：“set GENERATE_SOURCEMAP=false&craco-build“，“analyzer”：“env NODE_env=production build_analyzer=true yarn start”，“test”：”craco test“｝｝

4.创建craco.config。项目根目录中的js文件

/*craco.config。js*/模块。导出=｛…｝

上面使用了几个环境变量：

PORT起始端口

GENERATE_打包sourceMap时生成sourceMap

BUILD_ANALYZER文件模式输出编译分析

基本配置现已完成。接下来，我们将处理各种配置的覆盖范围。完全的民主。config可以在官方craco文档中详细查询js配置文件的结构：。

扩展babel配置

虽然可以在configure中定义babel配置，但craco也提供了独立编写的快捷方式。添加@babel/preset env配置的示例如下：

/*craco.config。js*/模块。导出=｛babel:｛presets://https://babeljs.io/docs/en/babel-preset-env#usebuiltins           // https://github.com/zloirock/core-js/blob/master/docs/2019-03-19-core-js-3-babel-and-a-look-into-the-future.mdcorejs:｛版本：3，//使用core-js@3提案：true，}，}]，]，plugins:[/Configure babel plugin import['import'，｛libraryName:'antd'，libraryDirectory:'es'，style:true｝，'antd']，//配置解析器[“@babel/plugin proposition decorators”，｛“legacy”：true｝]，[“@babel/plucin proposation class properties”，{“loose”：true}]，loaderOptions:｛｝，loaderOptions：（babelLoaderOptions，｛env，paths｝）=>｛return babelLoaderOptions；｝      },}

检查模块编译

新的WebpackBar（｛profile:true｝）、新的CircularDependencyPlugin（{exclude:/node_modules/，include:/src/，failOnError:true，allowAsyncCycles:false，cwd:process.cwd（）｝）

观察包装进度

Const SimpleProgressWebpackPlugin=require（'simple progress webpack plugin'）模块导出=｛webpack:｛plugins:[/查看打包进度new SimpleProgress webpack plugin（）]｝｝

修改打包输出目录

单元exports=｛webpack:｛configure:（webpackConfig，｛env，paths｝）=>｛//path.appPath=“public”paths.appBuild=“dist”webpackConfig.output=｛…webpackConfiguration output，//…｛//filename:whenDev（（）=>“static/js/bundle.js”，“static.js/[name].js”），//chunkFilename:“static/hs/[name].js'//}，路径：path。解析（__dirname，'dist'），//修改输出文件目录