React 腳手架
項(xiàng)目地址 ：https://github.com/ZengTianShengZ/react-lesson/blob/master/lesson-4/README.md
之前在開發(fā) Vue 項(xiàng)目的時(shí)候,用到了 vue-cli 腳手架,很是方便.到了 React項(xiàng)目,想著是否自己也可以定制一套實(shí)用的腳手架,剛好,了解到可以做基于yeoman generator的npm包.于是倒騰出來這套基 react+es6+redux+router 的架手架.
demo5-cli.gif
webpack Feature
- 可以解析JSX語法
- 可以解析ES6語法新特性
- 支持LESS肾扰、SCSS預(yù)處理器
- 編譯完成自動(dòng)打開瀏覽器
- 單獨(dú)分離CSS樣式文件
- 支持文件MD5戳，解決文件緩存問題
- 支持圖片、圖標(biāo)字體等資源的編譯
- 支持瀏覽器源碼調(diào)試
- 實(shí)現(xiàn)組件級(jí)熱更新
- 實(shí)現(xiàn)代碼的熱替換夺溢，瀏覽器實(shí)時(shí)刷新查看效果
- 區(qū)分開發(fā)環(huán)境和生產(chǎn)環(huán)境
- 分離業(yè)務(wù)功能代碼和公共依賴代碼
目錄結(jié)構(gòu)
z-react-cli
|-- index.html // 啟動(dòng)頁(yè)(主頁(yè))
|-- build //構(gòu)建目錄，遵循發(fā)布系統(tǒng)規(guī)范
| |-- index.html //靜態(tài)頁(yè)面
| |-- static //資源文件發(fā)布到cdn,或發(fā)布到服務(wù)器
|
|-- src //源碼目錄
| |--component // 組件
| | |-- common //公共組件
| | |-- temp //父組件
| |--Config //工具方法
| |--Image //圖片資源
| |--Redux // react-redux 數(shù)據(jù)狀態(tài)管理
| | |-- action.jsx // 派發(fā)數(shù)據(jù)的 action
| | |-- reducer.jsx //用于處理 action 的 reducer
| | |-- store.jsx //數(shù)據(jù)管理器
| |-- Router //路由
| |-- Style //樣式
| |-- template //編譯html模板
| |-- App.jsx //js 入口文件
|-- static // 源碼靜態(tài)資源(公共資源)
|
|-- webpack.config.hot // 本地?zé)峋幾g
|-- webpack.config.buildt // 編譯發(fā)布測(cè)試環(huán)境
|-- webpack.config.online // 編譯發(fā)布線上環(huán)境
使用腳手架 -- generator-z-react-cli
首先確確保自己安裝了 nodejs , 然后全局安裝 yeoman
npm install -g yo
然后安裝 腳手架
npm install -g generator-z-react-cli
最后新建個(gè)空文件夾,在文件夾里生成項(xiàng)目
yo z-react-cli
ok , 項(xiàng)目構(gòu)建完畢,可以愉快的進(jìn)行 react 項(xiàng)目開發(fā)了
前端項(xiàng)目構(gòu)建
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run hot
# build for production with test
npm run buildt
# build for production with online
npm run online
項(xiàng)目架構(gòu)
- 本項(xiàng)目采用 React 框架 , react-redux做數(shù)據(jù)狀態(tài)管理,react-router做路由轉(zhuǎn)發(fā)
- 用 webpack 編譯打包項(xiàng)目,實(shí)現(xiàn)生產(chǎn),預(yù)發(fā),線上不同環(huán)境下的調(diào)試開發(fā)
最后：有問題可以一起探討 锈遥，歡迎issues 和
star
