記一次create-react-app的二次開發
摘要：
引言
create-react-app
是facebook官方出版的react應用快速構建工具，主要以node跟webpack為核心工具。為什麼我們要選擇create-react-app作為我們的團隊專案腳手架？主要有一下幾個理由：
create-react-a...
引言
create-react-app 是facebook官方出版的react應用快速構建工具，主要以node跟webpack為核心工具。為什麼我們要選擇create-react-app作為我們的團隊專案腳手架？主要有一下幾個理由：
- create-react-app是facebook出品的腳手架，質量高，維護、更新及時，社群成熟，issue解決及時
- 基礎功能全面，基本滿足需求，開封即用
- node、webpack是主要開發工具，對前端開發友好
- 官方支援二次開發，二次開發成本低，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無效