之前我已經(jīng)搭建過一個(gè)開發(fā)移動(dòng)web的react開發(fā)環(huán)境纺腊，在那時(shí)我就已經(jīng)想把我的極客教程弄一個(gè)手機(jī)上體驗(yàn)好的web app糜烹，無奈公司業(yè)務(wù)太多薄霜，整天忙著趕項(xiàng)目某抓，下班回去的時(shí)候疲憊不堪，已經(jīng)沒有更多的精力放在自己的項(xiàng)目上《韫希現(xiàn)在有點(diǎn)時(shí)間了否副，趕緊做點(diǎn)自己的項(xiàng)目。
俗話說崎坊，磨刀不誤砍柴工备禀。先花了一點(diǎn)時(shí)間搭建了一下開發(fā)環(huán)境，這里記錄一下過程及遇到的坑。之前搭建的環(huán)境由于webpack 還是 1 曲尸，但現(xiàn)在的版本都升至3.多了赋续，所以腳手架上果斷選擇react官網(wǎng)出的create-react-app,ui上選擇螞蟻金服的 antd-mobile
1. 快速開始：
npm install -g create-react-app /* 安裝create-react-app，建議使用cnpm */
create-react-app geekjc-antd-mobile /* 使用命令創(chuàng)建應(yīng)用另患，myapp為項(xiàng)目名稱 */
cd geekjc-antd-mobile /* 進(jìn)入目錄纽乱，然后啟動(dòng) */
npm start
注意:這里不提倡用faceback的yarn包管理器，因?yàn)楣P者一開始用的是yarn柴淘，但是項(xiàng)目總是運(yùn)行不起來^ _ ^ 但后面安裝其它需要的包的時(shí)候可以用下yarn 安裝
按以上執(zhí)行迫淹，即可快速創(chuàng)建React開發(fā)環(huán)境秘通。
打開http://localhost:3000/ 查看为严，出現(xiàn)如下圖:
2. 環(huán)境配置介紹：
2.1 項(xiàng)目結(jié)構(gòu)：
生成項(xiàng)目后，腳手架為了“優(yōu)雅”... ...隱藏了所有的webpack相關(guān)的配置文件肺稀，此時(shí)查看myapp文件夾目錄第股，會(huì)發(fā)現(xiàn)找不到任何webpack配置文件。執(zhí)行以下命令：
yarn eject
再查看geekjc-antd-mobile 文件夾话原，可以看到完整的項(xiàng)目結(jié)構(gòu)：
2.2 項(xiàng)目配置介紹
此處需要有npm夕吻、webpack的基礎(chǔ)知識(shí)，充電傳送門：Webpack——解決疑惑,讓你明白 此篇文章是基于webpack 1.x 版本的繁仁，升級(jí)2.x版的可以看
查看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為開發(fā)環(huán)境稚矿，build.js為打包腳本。
開發(fā)環(huán)境捻浦，代理請(qǐng)求
查看start.js, Facebook基本為每項(xiàng)配置都寫了詳盡的注釋晤揣，
start.js腳本啟動(dòng)了dev-server, 這里需要了解的是
function addMiddleware(devServer){
... ...
這個(gè)函數(shù)調(diào)用http-proxy-middleware模塊，將代理請(qǐng)求朱灿，代理地址在package.json中添加
}
在package.json中添加字段proxy昧识，開發(fā)環(huán)境下dev-server將會(huì)自動(dòng)轉(zhuǎn)發(fā)請(qǐng)求：
"proxy": "https://www.geekjc.com"
SASS、LESS等CSS預(yù)處理器配置
Facebook官方在create-react-app升級(jí)到某一版本盗扒，突然丟掉了默認(rèn)對(duì)sass跪楞、less等預(yù)處理器的支持，官方文檔說明
于是侣灶，只能自己動(dòng)手甸祭，在config目錄下，webpack.config.dev.js 和 webpack.config.prod.js文件炫隶，沒有抽出 loader淋叶、postcss之類一般共用的配置，于是，在兩個(gè)文件夾都要一起配置煞檩，也可以抽出共用部分处嫌，以便維護(hù)。
這里以webpack.config.dev.js舉例斟湃，webpack.config.prod.js一樣配置即可：
LESS-loader：
1熏迹、命令行，在當(dāng)前目錄執(zhí)行：
npm install less-loader --save-dev
2凝赛、找到webpack.config.dev.js文件中 loaders中的加入（值為數(shù)組）注暗，排除less文件，否則將被'url-loader'捕獲墓猎。
{
loader: require.resolve('file-loader'),
exclude: [/\.js$/, /\.html$/, /\.json$/,/\.svg$/, /\.less$/],
options: {
name: 'static/media/[name].[hash:8].[ext]',
},
},
3捆昏、loaders新增一項(xiàng)：
{
test: /\.less$/,
use: [
require.resolve('style-loader'),
require.resolve('css-loader'),
{
loader: require.resolve('postcss-loader'),
options: {
ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options
plugins: () => [
pxtorem({
rootValue: 100,
propWhiteList: [],
}),
autoprefixer({
browsers: ['last 2 versions', 'Firefox ESR', '> 1%', 'ie >= 8', 'iOS >= 8', 'Android >= 4'],
}),
],
},
},
{
loader: require.resolve('less-loader'),
options: {
modifyVars: { "@primary-color": "#1DA57A" },
},
},
],
},
至此，LESS文件就可以正常打包了毙沾，SCSS文件類似骗卜，不再贅述。
3. antd-mobile的引入及配置
在命令行執(zhí)行：
npm install antd-mobile --save
3.1 移動(dòng)端高清方案
因0.8以后的版本引入移動(dòng)端高清方案左胞，因此需要在webpack等增加相應(yīng)配置寇仓，必須配置！烤宙，官方說明
按官方說明配置即可遍烦。
3.2 按需引入
為減少打包后體積以及方便書寫，可用babel-plugin-import插件躺枕，配置后引入模塊可如下：
import { Button } from 'antd-mobile';
自動(dòng)引入CSS和JS服猪，無需再引入整個(gè)antd-mobile的整個(gè)CSS文件
使用如下：
命令行執(zhí)行：
npm install babel-plugin-import --save-dev
安裝完畢后,在webpack.config.dev.js按如下配置:
{
test: /\.(js|jsx)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
plugins: [
['import', { libraryName: 'antd-mobile', style: true }],
],
// This is a feature of `babel-loader` for webpack (not Babel itself).
// It enables caching results in ./node_modules/.cache/babel-loader/
// directory for faster rebuilds.
cacheDirectory: true,
},
},
4. 補(bǔ)充
用create-react--app 結(jié)合 antd-mobile有兩種構(gòu)建方式
具體可以查看在 create-react(-native)-app 中使用
注意查看升級(jí)指南，里面很詳細(xì)了屯远。
5. 完
至此蔓姚，一個(gè)移動(dòng)web開發(fā)環(huán)境就搭建完了 ，如果搭建過程遇到困難的可以查看本項(xiàng)目慨丐，項(xiàng)目地址：geekjc-antd-mobile
