React v16 與 Webpack v4 的多特性模板項目

05-21

來自專欄某熊的全棧之路

題註：歡迎加入阿里南京前端團隊，歡迎關注阿里南京技術專刊了解更多訊息。

React & Webpack Boilerplate V4

React & Webpack Boilerplate V4 是筆者前端常用模板集錦項目 fe-boilerplate 的一部分，儘可能地使用無異議的工具，提供直觀且簡潔明了的方式；相較於 create-react-app，具有更好的可配置性與適應性，適合於中長期項目。支持最新的 Webpack 4 & React 16.3 版本，如果需要引入 TypeScript 支持，可以借鑒 react/webpack-ts 這個模板。

為了保證項目的純粹性，將原本 React Router，Redux，MobX 等常見的技術框架的使用遷移到了 fe-boilerplate 的其他模板項目中。也可以查閱 Webpack CheatSheet，或者 React CheatSheet、現代 Web 開發基礎與工程實踐了解更多 Web 開發實踐的知識。

配置與使用

下載或者克隆 fe-boilerplate，並且進入 react/webpack 子目錄：

# 安裝依賴$ cnpm install# 僅啟動 Web 開發伺服器$ npm run dev# 啟動 Web 開發伺服器與 Mock 伺服器$ npm start# 啟動 Storybook 服務，在進行組件開發時使用$ npm run storybook# 編譯為可發布的包體$ npm run build# 使用 *.umd.* 配置文件，編譯為庫$ npm run build:lib# 執行 ESLint$ npm run lint# 執行包體分析$ npm run analyze

如果我們是進行的多頁面應用開發，那麼可以在 webpack.config.base.js 文件中添加更多的 Entry 與 HtmlWebpackPlugin 配置。

技術棧

樣式

支持使用 CSS Modules/SCSS/Less 等 CSS 模塊化解決方案，對於潛在的類名過長導致的冗餘包體等問題可以參考 babel-plugin-jsx-nested-classname。
示例代碼使用了 styled-components 作為 CSS-in-JS 庫。
使用 PostCSS 作為 CSS 代碼的後置 Polyfill 以及語法轉換支持，詳見 postcss.config.js 中的配置。

約束

使用 Prettier 作為代碼格式化工具。
強烈建議使用 ESLint 進行代碼風格控制，可以使用 vscode-eslint 插件以獲得更好的開發體驗；ESLint 規則推薦使用 eslint-config-airbnb。
可以使用 vscode-import-formatter 等格式化工具處理代碼的細節風格，譬如引用順序等問題。

測試

使用 Jest 作為 Test Runner 以及單元測試框架。
使用 Enzyme 作為 React 組件的測試框架。

計算

使用 workerize-loader 提供便捷的 Web Worker 計算支撐，可以參考 DOM CheatSheet 獲取更多內容。

開發態特性

熱載入

使用內建的 Webpack DevServer 作為開發伺服器。
使用 React Hot Loader V4 提供 React 組件熱載入的能力。

構建優化

使用 DllPlugin 作為開發環境下公共代碼提取工具以優化編譯速度生產環境。
可以考慮使用 HappyPack, parallel-webpack 等工具提升 Webpack 的並行處理能力。

發布態特性

代碼分割，Webpack 4 移除了 CommonChunksPlugin，替換以 optimization 與 splitChunks 配置項，詳細配置參考 webpack.config.prod.js。
PWA 特性，使用 offline-plugin 添加便捷的 PWA 支持。
服務端渲染，詳見 ssr/server。
代碼優化，使用 Prepack & prepack-webpack-plugin 進行代碼優化。