Facebook?官方推出Create-React-App腳手架，基本可以零配置搭建基于webpack的React開(kāi)發(fā)環(huán)境，內(nèi)置了熱更新等功能。
詳細(xì)文檔可前往鏈接：Create-React-App文檔
本文將介紹使用Create-React-App腳手架搭建antd-mobile的開(kāi)發(fā)環(huán)境。
快速開(kāi)始：
npm?install?-g?create-react-app?? ? ? /*?安裝create-react-app，建議使用cnpm?*/
create-react-app?myapp ? ? ? ? ? ? ? ? /*?使用命令創(chuàng)建應(yīng)用，myapp為項(xiàng)目名稱(chēng)?*/
cd?myapp ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?/*?進(jìn)入目錄，然后啟動(dòng)?*/
npm?start
按以上執(zhí)行，即可快速創(chuàng)建React開(kāi)發(fā)環(huán)境。
打開(kāi)http://localhost:3000/ 查看
環(huán)境配置介紹：
一、項(xiàng)目結(jié)構(gòu)：
生成項(xiàng)目后，腳手架為了“優(yōu)雅”...?...隱藏了所有的webpack相關(guān)的配置文件，此時(shí)查看myapp文件夾目錄，會(huì)發(fā)現(xiàn)找不到任何webpack配置文件。執(zhí)行以下命令：
npm?run?eject
再查看myapp?文件夾，可以看到完整的項(xiàng)目結(jié)構(gòu)：
myapp/
? ? node_modules/
? ? package.json
? ? .gitignore
? ? config/
? ? ? ? paths.js
? ? ? ? polyfills
? ? ? ? env.js
? ? ? ? webpack.config.dev.js
? ? ? ? webpack.config.prod.js
? ? public/
? ? ? ? index.html? ?/?入口html文件?/
? ? scripts/
? ? ? ? build.js
? ? ? ? start.js
? ? ? ? test.js
? ? src/
? ? ? ? App.js
? ? ? ? index.js? ??/?主入口文件?/
以上加粗文件為主要配置文件。
二、項(xiàng)目配置介紹
此處需要有npm、webpack的基礎(chǔ)知識(shí)，充電傳送門(mén)：[webpack學(xué)習(xí)教程](http://m.itdecent.cn/p/42e11515c10f)
查看package.json文件的scripts，
"scripts":?{
? ? "start":?"node?scripts/start.js",
? ? "build":?"node?scripts/build.js",
? ? "test":?"node?scripts/test.js?--env=jsdom"
},
可知，運(yùn)行時(shí)是直接執(zhí)行scripts文件目錄下的js文件。
其中*start.js*為開(kāi)發(fā)環(huán)境，*build.js*為打包腳本。
開(kāi)發(fā)環(huán)境，代理請(qǐng)求
查看start.js,?Facebook基本為每項(xiàng)配置都寫(xiě)了詳盡的注釋?zhuān)?/p>
start.js腳本啟動(dòng)了dev-server,?這里需要了解的是
function?addMiddleware(devServer){
? ? ...?...
? ? 這個(gè)函數(shù)調(diào)用http-proxy-middleware模塊，將代理請(qǐng)求，代理地址在package.json中添加
}
在package.json中添加字段proxy，開(kāi)發(fā)環(huán)境下dev-server將會(huì)自動(dòng)轉(zhuǎn)發(fā)請(qǐng)求：
"proxy":?"http://aaa.bbb.com"
SASS、LESS等CSS預(yù)處理器配置
Facebook官方在create-react-app升級(jí)到某一版本，突然丟掉了默認(rèn)對(duì)sass、less等預(yù)處理器的支持，官方文檔說(shuō)明
于是，只能自己動(dòng)手，在config目錄下，webpack.config.dev.js?和?webpack.config.prod.js文件，沒(méi)有抽出?loader、postcss之類(lèi)一般共用的配置，于是，在兩個(gè)文件夾都要一起配置，也可以抽出共用部分，以便維護(hù)。
這里以webpack.config.dev.js舉例，webpack.config.prod.js一樣配置即可：
SASS-loader：
1、命令行，在當(dāng)前目錄執(zhí)行：
npm?install?sass-loader?node-sass?--save-dev
2、找到webpack.config.dev.js文件中?loaders中的第一項(xiàng)exclude（值為數(shù)組），排除scss文件，否則將被'url-loader'捕獲。
{
exclude:?[
? ? /\.html$/,
? ? /\.(js|jsx)(\?.*)?$/,
? ? /\.css$/,
? ? /\.json$/,
? ? /\.svg$/,
? ? /\.scss$/?? ? ....新增項(xiàng)!
]
3、loaders新增一項(xiàng)：
{
? ? test:?/\.scss$/,
? ? loader:?'style!css!postcss!sass?outputStyle=expanded'
},
至此，SASS文件就可以正常打包了（此處針對(duì)SCSS文件，如用到SASS，可將SCSS的正則修改下），LESS文件類(lèi)似，不再贅述。
三、antd-mobile的引入及配置
在命令行執(zhí)行：
npm?install?antd-mobile?--save
安裝完畢即可，現(xiàn)版本1.0.6
移動(dòng)端高清方案
因0.8以后的版本引入移動(dòng)端高清方案，因此需要在webpack等增加相應(yīng)配置，**必須配置！**，官方說(shuō)明
按官方說(shuō)明配置即可。
按需引入
為減少打包后體積以及方便書(shū)寫(xiě)，可用babel-plugin-import插件，配置后引入模塊可如下：
import?{Picker}?from?'antd-mobile';
自動(dòng)引入CSS和JS，無(wú)需再引入整個(gè)antd-mobile的整個(gè)CSS文件
使用如下：
命令行執(zhí)行：
npm?install?babel-plugin-import?--save-dev
安裝完畢后，在根目錄新建文件，命名:?.babelrc.js
{
? "presets":?[
? ? "es2015",
? ? "react"
? ],
? "plugins":?[
? ? [
? ? ? "import",
? ? ? ? {
? ? ? ? ? "libraryName":?"antd-mobile",
? ? ? ? ? "style":?"css"
? ? ? ? }
? ? ? ]
? ? ]
}
在文件內(nèi)輸入以上內(nèi)容，為babel的配置。
然后！??！最重要的一步，把package.json中的babel配置給刪掉，尤其是：react-app?。?！
webpack.config.dev.js和webpack.config.prod.js中，都需要為resolve的extensions新增一項(xiàng)'.web.js'
antd-mobile的web版的文件后綴為.web.js?...
四、雜項(xiàng)
React-Router版本
現(xiàn)在最新版本React-Router為4.x.x，與原用的2.x.x的API變化稍大（官方直接跳過(guò)了3...），如需使用2.x.x版本，可
npm?remove?react-router?--save
然后在package.json中dependencies新增字段：
"react-router":?"^2.0.0?<?3.0.0",
接著執(zhí)行：
npm?install
到這里，就算搭建完開(kāi)發(fā)環(huán)境了，可以正常進(jìn)行開(kāi)發(fā)了。
END
