create-react-app 2.0中使用antd(eject)
早些时候CRA(create-react-app)升级到2.0.3的时候, react-app-rewired没有跟着升级, 导致项目无法启动, 于是乎直接eject 开始改造项目.
查看版本
> create-react-app --version
2.0.3
创建项目
create-react-app my-project
cd my-project
yarn eject # 输入 y
目前为止项目目录结构, 忽略node_modules这个黑洞
├── README.md
├── config
│ ├── env.js
│ ├── jest
│ │ ├── cssTransform.js
│ │ └── fileTransform.js
│ ├── paths.js
│ ├── webpack.config.js
│ └── webpackDevServer.config.js
├── package.json
├── public
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
├── scripts
│ ├── build.js
│ ├── start.js
│ └── test.js
├── src
│ ├── App.css
│ ├── App.js
│ ├── App.test.js
│ ├── index.css
│ ├── index.js
│ ├── logo.svg
│ └── serviceWorker.js
└── yarn.lock
安装依赖
yarn add antd
yarn add babel-plugin-import less less-loader @babel/plugin-proposal-decorators -D
CRA eject之后package.json里面没有区分devDependencies 和 dependencies, 但是不影响使用
因为antd是使用的less, CRA默认不支持, 所以需要改下默认的webpack配置, config/webpack.config.js
首先修改babel配置
个人习惯使用babelrc, 所以把babel-loader options中babelrc的值改为true, 增加.babelrc文件
{"presets": ["react-app"],"plugins": [["import",{"libraryName": "antd","libraryDirectory": "lib","style": true},"ant"],["@babel/plugin-proposal-decorators", // 启用装饰器{"legacy": true}]]
}
参照默认的sass配置, 增加less配置
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;
在module>rules中添加规则
// sass rule
//...{test: lessRegex,exclude: lessModuleRegex,use: getStyleLoaders({importLoaders: 2,sourceMap: isEnvProduction && shouldUseSourceMap},'less-loader',{javascriptEnabled: true}),sideEffects: true},{test: lessModuleRegex,use: getStyleLoaders({importLoaders: 2,sourceMap: isEnvProduction && shouldUseSourceMap,modules: true,getLocalIdent: getCSSModuleLocalIdent},'less-loader',{javascriptEnabled: true})}
// file loader
至此基本项目虽然已经基本完成, 但是如果你是使用less版本比较高, 项目是无法运行的
参考issue
需要改造getStyleLoaders函数, 增加第三个参数otherConfig, 就是上面代码中的 javascriptEnabled: true
const getStyleLoaders = (cssOptions, preProcessor, otherConfig) => {const loaders = [isEnvDevelopment && require.resolve('style-loader'),isEnvProduction && {loader: MiniCssExtractPlugin.loader,options: Object.assign({}, shouldUseRelativeAssetPaths ? { publicPath: '../../' } : undefined)},{loader: require.resolve('css-loader'),options: cssOptions},{loader: require.resolve('postcss-loader'),options: {ident: 'postcss',plugins: () => [require('postcss-flexbugs-fixes'),require('postcss-preset-env')({autoprefixer: {flexbox: 'no-2009'},stage: 3})],sourceMap: isEnvProduction && shouldUseSourceMap}}].filter(Boolean);if (preProcessor) {loaders.push({loader: require.resolve(preProcessor),options: {sourceMap: isEnvProduction && shouldUseSourceMap,...otherConfig}});}return loaders;};
这样修改之后, 自定义主题modifyVars也可以写在otherConfig中, 一举两得, 不多赘述.
至此项目?
优化完善, 启用dll
关于dll的利弊不再赘述, 这里只是说明我用的方法, 也不详细展开, 每个人的项目可能都不一样
安装插件
yarn add clean-webpack-plugin webpack-cli add-asset-html-webpack-plugin -D
在config/paths.js exports对象中增加一行kv
appDll: resolveApp("dll"),
增加config/webpack.dll.conf.js文件
const paths = require('./paths');
const path = require('path');
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');const vendors = ['react','react-dom'
];module.exports = {mode: 'production',performance: {hints: false},output: {path: paths.appDll,publicPath: paths.servedPath,filename: '[name].[hash].dll.js',library: '[name]_[hash]'},entry: {vendor: vendors},plugins: [new CleanWebpackPlugin([paths.appDll], {root: paths.appPath, // 根目录verbose: true, // 开启在控制台输出信息dry: false // 启用删除文件}),new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),new webpack.DllPlugin({path: path.join(paths.appDll, '[name]-manifest.json'),name: '[name]_[hash]'})]
};
package.json增加dll 脚本
"dll": "webpack --progress --config config/webpack.dll.conf.js"
运行 yarn dll
打包vendor在dll文件夹中
生产模式使用dll, 修改webpack.conf.js, 增加assets插件和dllreference插件
...
const AddAssetHtmlPlugin = require("add-asset-html-webpack-plugin");
....plugins: {......isEnvProduction &&new webpack.DllReferencePlugin({manifest: require('../dll/vendor-manifest.json')}),isEnvProduction &&new AddAssetHtmlPlugin({filepath: path.resolve(paths.appDll, '*.js'),includeSourcemap: false}),}
至此结束, 验证效果
yarn build
build 文件夹结构
├── asset-manifest.json
├── favicon.ico
├── index.html
├── manifest.json
├── precache-manifest.8175e98134227f2327b88338d3024239.js
├── service-worker.js
├── static
│ ├── css
│ │ ├── 1.83e366fa.chunk.css
│ │ ├── 1.83e366fa.chunk.css.map
│ │ ├── main.c7ff46e9.chunk.css
│ │ └── main.c7ff46e9.chunk.css.map
│ ├── js
│ │ ├── 1.860809fa.chunk.js
│ │ ├── 1.860809fa.chunk.js.map
│ │ ├── main.0df678d7.chunk.js
│ │ ├── main.0df678d7.chunk.js.map
│ │ ├── runtime~main.229c360f.js
│ │ └── runtime~main.229c360f.js.map
│ └── media
│ └── logo.5d5d9eef.svg
└── vendor.52ec4f1c0bead1c1a489.dll.js
本地运行serve -s build
, 项目能正常显示, build文件夹下有vendor.hash.dll.js则说明配置成.
create-react-app 2.0中使用antd(eject)相关推荐
- 如何使用Create React App DevOps自动化工作中所有无聊的部分
by James Y Rauhut 詹姆士·鲁豪(James Y Rauhut) 如何使用Create React App DevOps自动化工作中所有无聊的部分 (How I automate al ...
- Create React App 2.0 华丽登场
贺! Create React App 2.0 在 10/02 正式发布 ?????? Create React App 是由官方所维护的开发工具,主要提供了专属于 React 开发环境的前置工作.简 ...
- Create React App 2.0 正式发布:Babel 7、webpack 4 等
英文原文:Create React App 2.0: Babel 7, Sass, and More – React Blog 以下是简要翻译 React 本身是没有附带任何编译工具的,如果没有测试运 ...
- 在 .NET Core 5 中集成 Create React app
翻译自 Camilo Reyes 2021年2月22日的文章 <Integrate Create React app with .NET Core 5> [1] 本文演示了如何将 Crea ...
- 【翻译】基于 Create React App路由4.0的异步组件加载(Code Splitting)
基于 Create React App路由4.0的异步组件加载 本文章是一个额外的篇章,它可以在你的React app中,帮助加快初始的加载组件时间.当然这个操作不是完全必要的,但如果你好奇的话,请随 ...
- Vite 3.0 vs. Create React App:比较和迁移指南
Create React App (CRA) 在 React 社区及其整个生态系统的发展中发挥了关键作用. 在突发奇想构建本地 React 开发环境时,它是不同技能的开发人员的首选工具. CRA 拥有 ...
- 深入浅出 Create React App
本文差点难产而死.因为总结的过程中,多次怀疑本文是对官方文档的直接翻译和简单诺列:同时官方文档很全面,全范围的介绍无疑加深了写作的心智负担.但在最终的梳理中,发现走出了一条与众不同的路,于是坚持分享出 ...
- react快速开始(二)-使用脚手架Create React App创建react应用
文章目录 react快速开始(二)-Create React App入门 什么是Create React App 快速开始 使用IDE webstrom创建react项目 create react a ...
- Create React App proxy配置
最近又吃了没文化的亏(哭晕在洗手间≧ ﹏ ≦) 做后台管理系统的时候,需要调一个易连云打印小票的接口, 项目框架是 Create React App+typescript,后端是node.js 本媛负 ...
最新文章
- 百度解密EasyDL,零门槛实现 AI 应用!
- a_2可以用作python标识符嘛,【单选题】下列选项中,可作为Python标识符的是哪项?
A. getpath()
B. throw
C. my#var
D. _ My_price...
- java注释风格 与javadoc
- Oracle三种循环:for,while,do...while(PL/SQL)
- 【CV秋季划】深度学习换脸算法视频更新
- Debian 3.1 (Sarge) 正式发布,Knoppix也升级到最后一个单CD版3.9
- 有关Vs2008 由代码转化到设计器时死掉问题
- shell提取文件中的dojo mobile类
- python画图哆啦a梦大作业_Python—turtle画图(哆啦A梦)
- 读书笔记之inside JVM(4)
- JNA调用DLL函数遇到的几个问题
- 详细解读用C语言编写的 “扫雷”程序
- AutoCAD 二次开发之 ObjectARX 环境搭建
- Himawari-8葵花数据的python读取和matlab读取
- ArcGIS修改默认文件地理数据库
- 哈霍兰服务器修改WCL记录,魔兽世界:怀旧服哈霍兰服务器再创纪录,最强“刷子”六天刷出420万荣誉...
- python爬取动态加载的网页之爬取猫眼电影实时票房
- java 6u45 no sni 2_sjscxz.taobao.com
- 基于视词袋模型的场景识别
- Tiled2Unity报错处理办法
热门文章
- postgres 入门
- 《敏捷迭代开发:管理者指南》—第2章2.5节渐进开发和自适应开发
- 诚信,聪明,快乐,地位与竞争
- LeetCode:Remove Nth Node From End of List
- aFleX脚本常见错误
- GBK和UTF-8之间的战争,websphere6.1乱码解决方案
- 20100707 学习记录:[System.Web.Script.Services.ScriptService]引用问题
- c++ array容器 传参_华东理工:氮和氧共掺杂的分级多孔碳,用于超级电容器的电极材料...
- 计算机网络控制系统,计算机网络远程控制系统的应用研究(原稿)
- 201803考试批次2C 程序设计语言,201803考试批次2可视化程序设计(VB)D卷