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

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

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 進行代碼優化。