create-react-boilerplate: 面向 React 技術棧的工程項目腳手架

01-30

最近筆者在逐步將之前的項目升級為 Webpack2 + ReactRouter4，同時優化 MobX/Redux 搭配的狀態管理模式，以及將通用組件抽取到 React Storybook 中切向所謂組件驅動開發。對於其中淺薄的工程化的思考可以參考2016-我的前端之路:工具化與工程化,對於模板中配置的詳解參考詳細的從零到一的 React 及其技術棧使用教程]，這也是筆者當前倉庫中另一個主要內容。

言歸正傳，筆者最近團隊中項目在逐步增多，特別是有很多小的需要快速搭建的項目；由於人員素質相對參差，並且技術包括實踐衍化過快，筆者就花了幾小時參考了 create-react-app 將 Webpack2-Boilerplate 封裝了一下。目前存在大量的問題，預定的四個模式中也只完善了最基本的純 React 應用，歡迎大家提出指導或者有什麼覺得不錯的特性。

可以直接使用 npm 或者 yarn 安裝：

npm install create-react-boilerplate -gn

基本使用方式類似於 create-react-app，直接創建項目：

其支持四個模板類型：

react：側重 React，React StoryBook， ReactRouter4
mobx：側重 mobx 模式
redux：側重 redux
full：側重完整的工程項目

create-react-boilerplate appn

create-react-boilerplate 並沒有負責安裝依賴，項目創建之後切換到項目目錄，執行sh ./install.sh安裝依賴，包括：

#!/usr/bin/env bashnnpm install --global yarnnyarn install #安裝本地package.json中依賴nyarn global add flow-bin #全局安裝flow類型檢查工具nyarn global add cnpm-check #全局安裝npm-checknyarn global add babel-cli #全局安裝Babel CLI命令行工具nyarn global add weinre #全局安裝調試工具n

安裝完畢後執行npm start即可進入開發模式，關於這裡的幾個構建目標可以參考詳細的從零到一的 React 及其技術棧使用教程。