前端使用React.js+webpack進(jìn)行組件化開(kāi)發(fā)越來(lái)流行了.
想使用react.js進(jìn)行組件化開(kāi)發(fā),但又不想學(xué)習(xí)太多新知識(shí)(比如如何配置webpack等), 使用腳本手架工具自然為上上之選.
reactweb-cli
用于快速創(chuàng)建react web 項(xiàng)目.
使用方法也很簡(jiǎn)單:
安裝
npm install -g reactweb-cli
創(chuàng)建新項(xiàng)目
reactweb init my-project
根據(jù)提示一步步操作, 創(chuàng)建新的工程(示例工程名為: my-project)
image.png
項(xiàng)目結(jié)構(gòu)
- my-project
+ build // webpack相關(guān)配置
+ config // 配置
- src // 源碼
- asserts // 靜態(tài)資源
+ imgs // 圖片: png, jpg...
+ styles // 樣式: css, less...
+ components // React組件
+ static // 高度靜態(tài)資源
+ test // 測(cè)試相關(guān)
.babelrc // babel配置
.eslintignore // eslint 忽略配置
.eslintrc.js // eslint 配置
.gitignore // git 忽略配置
.postcssrc.js // postcss配置
index.html // html模板
package.json
README.md
運(yùn)行開(kāi)發(fā)server
$ cd my-project # 進(jìn)入到工程目錄
$ npm install # 安裝依賴(lài)庫(kù)
$ npm run dev # 運(yùn)行開(kāi)發(fā)Server
運(yùn)行npm run dev后程序會(huì)在默認(rèn)瀏覽器中打開(kāi)http://127.0.0.1:8080/
默認(rèn)情況下, 開(kāi)發(fā)Serve端口號(hào)為8080.
當(dāng)然, 如果有需要, 大家也可以自動(dòng)在/config/index.js中進(jìn)行修改.
發(fā)布生產(chǎn)文件
$ npm run build
運(yùn)行這條命令后, 將會(huì)在項(xiàng)目目錄下生成一個(gè)dist的目錄, 即生產(chǎn)文件所在目錄.
此時(shí), 即可以用該dist目錄的文件發(fā)布到生產(chǎn)環(huán)境當(dāng)中了.
說(shuō)明
- reactweb-cli使用webpack2進(jìn)行編譯打包, 使用babel進(jìn)行es6語(yǔ)法進(jìn)行編譯.
- 默認(rèn)使用chunkhash對(duì)js/css/img文件名進(jìn)行hash處理, 以此來(lái)避免發(fā)布新版本時(shí)不使用瀏覽器緩存.
- 開(kāi)發(fā)環(huán)境下, 使用
devtool: "cheap-module-eval-source-map", 進(jìn)行開(kāi)發(fā), 使用此類(lèi)型的source map, 將能方便的幫助我們?cè)趈s編譯出錯(cuò)時(shí)快速定位到出錯(cuò)處. - 默認(rèn)使用可以使用css或less進(jìn)行樣式的編寫(xiě).有需要大家也可以自行去修改(只需要安裝相應(yīng)的css預(yù)編譯器的loader即可, 如
npm install --save-dev sass sass-loader, 即可使用.sass來(lái)編寫(xiě)樣式了.dev環(huán)境下, 保留source-map以方便調(diào)試.
