阅读 83

记一次create-react-app的二次开发

引言

create-react-app是facebook官方出版的react应用快速构建工具,主要以node跟webpack为核心工具。为什么我们要选择create-react-app作为我们的团队项目脚手架?主要有一下几个理由:

  1. create-react-app是facebook出品的脚手架,质量高,维护、更新及时,社区成熟,issue解决及时
  2. 基础功能全面,基本满足需求,开封即用
  3. node、webpack是主要开发工具,对前端开发友好
  4. 官方支持二次开发,二次开发成本低,packages下的react-scripts是主要二次开发的目录

这里是二次开发后的脚手架源码create-react-app-v2.1.8

1. 脚手架的工作原理

  • new commander
  • install react-scripts
  • node init.js
  • copy template

2. 为什么我们要从v1.1.5升级到v2.1.8

  • 新版本支持提供额外本地模板,这使我们创建多模板时不需要在全局安装新的全局命令
  • 重新定义我们的多入口开发模式,带来新的开发体验,提高开发效率
  • 新版本支持typesrcipts
  • 新版本的代码更加精简,代码更加好管理,这也是webpack4带来的优势,不需要定义开发模式和生产模式这样两份配置文件。
  • webpack3 -> webpack4

3. webpack4的新特性

  • 零配置(实际就是增加了很多默认配置项,让我们在无需配置config文件的时候直接使用,比如默认entry,output,mode)
  • 废弃CommonsChunkPlugin,UglifyJsPlugin,增加配置项optimization,这个功能很强大,稍后4中讲解
  • extract-text-webpack-plugin ->mini-css-extract-plugin
  • 提高打包速率(180%)
  • browserslist

4. 解读一下我们的webpack配置文件

  • pnp yarn的 新型模块加载方式
  • WorkboxWebpackPlugin离线应用pwa生成方案
  • cssnano css tree shaking
  • vw,vh的适配方案
  • 代码分割,代码懒加载
  • 多入口配置

5. 二次开发我们做了哪些优化

  • vw方案的适配
  • 增加了less的支持
  • 增强proxy的代理方案
  • 修改了cssnano方案
  • 增加了svg sprite
  • 支持多入口
  • 支持antd-mobile css按需加载
  • 支持装饰器@
  • 去除react-app-polyfill,使用自定会polyfill,扩大babel-polyfill的兼容范围
  • 自定义jinkens打包命令
  • 接入微信分享,性能监控等公用sdk

6.遗留的问题

  • wetime-mobile的tree shaking无效

7.github地址


关注下面的标签,发现更多相似文章
评论