admin 管理员组文章数量: 1184232
目录
环境
开发工具
创建
简单的配置
1. 安装craco插件
2. 修改package.json配置文件
3. 重写webpack配置文件
参考
简单记录一下使用create-react-app创建React项目，使用craco进行了简单的配置。
包括支持装饰器语法、按需加载和简单的包体积优化。
环境
NODE:
node -v
v16.13.2NPM:
npm -v
8.1.2YARN:
yarn -v
1.22.18开发工具
VS Code
创建
先看一下创建完成的目录
图方便直接使用create-react-app，先查看一下版本
create-react-app -V 这个命令等同于
create-react-app --version 我的版本是 5.0.1，如果查看版本命令报错，可能是没有安装create-react-app，全局安装一下
npm install create-react-app -g创建一个名为my-app的项目
create-react-app my-app简单的配置
create-react-app创建的项目config文件夹是隐藏，没法直接修改webpack.config.js配置文件。我们可以通过一些插件重写或者通过eject命令暴露配置文件。
我选择craco插件。
1. 安装craco插件
这种开发用的插件，我们可以通过 后缀 -D （等同于 -save -dev） 安装
yarn add @craco/craco -D安装完成后package.json文件中会多一个devDependencies，顾名思义就是开发依赖。
2. 修改package.json配置文件
在执行启动或者打包命令时，webpack首先找到项目根目录的package.json文件，根据配置执行对应的脚本。原本的配置和实际执行的脚本：
修改配置，使程序使用craco下的脚本
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test"
},实际执行的脚本：
3. 重写webpack配置文件
在项目根目录创建craco.config.js文件
一些基本的配置：
/* craco.config.js */
const path = require('path')
/** 插件 */
const CracoLessPlugin = require('craco-less')
// 打包分析
// const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
// 打包进度
const SimpleProgressWebpackPlugin = require('simple-progress-webpack-plugin')
const pathResolve = pathUrl => path.join(__dirname, pathUrl)
module.exports = {
webpack: {
plugins: [
// new BundleAnalyzerPlugin(),
new SimpleProgressWebpackPlugin()
],
alias: {
'@': pathResolve('src'),
},
configure: (webpackConfig, { env: webpackEnv, paths }) => {
const isProduction = webpackEnv === 'production'
if (isProduction) {
webpackConfig.optimization.splitChunks = {
cacheGroups: {
base: {
// 基本框架
chunks: 'all',
test: /(react|react-dom|react-router-dom)/,
name: 'base',
priority: 20,
},
antd: {
test: /antd/,
name: 'antd',
priority: 10,
},
commons: {
chunks: 'all',
// 将两个以上的chunk所共享的模块打包至commons组。
minChunks: 2,
name: 'commons',
priority: -10,
},
}
};
}
return webpackConfig;
},
},
babel: {
plugins: [
['import', { libraryName: 'antd', style: true }],
['@babel/plugin-proposal-decorators', { legacy: true }]
]
},
plugins: [
{
plugin: CracoLessPlugin,
options: {
lessLoaderOptions: {
lessOptions: {
modifyVars: { '@primary-color': '#19CAAD' },
javascriptEnabled: true,
},
},
},
},
],
};详细的配置参考webpack.config.js，这里用到的一些插件安装：
// 支持less
yarn add craco-less -D
// 打包进度
yarn add simple-progress-webpack-plugin -D
// 打包体积分析
yarn add webpack-bundle-analyzer -D
// 支持装饰器语法
yarn add @babel/plugin-proposal-decorators -D
// 按需加载
yarn add babel-plugin-import -D常用的组件库antd，不是开发依赖包
yarn add antd启动看一下
yarn start放开craco.config.js中 BundleAnalyzerPlugin 插件的注释，打一下包
yarn build可以看到 react-dom 和 react 被抽离出来打包到了一个叫base.[hash值].js文件中，说明配置是有效的。这可以帮助优化打包后的程序的体积。
参考
在 create-react-app 中使用 - Ant Design
版权声明：本文标题：使用create-react-app创建React项目 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1765754793a3412041.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论