記一次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地址