之前我已經搭建過一個開發移動web的react開發環境，在那時我就已經想把我的極客教程弄一個手機上體驗好的web app，無奈公司業務太多，整天忙著趕項目，下班回去的時候疲憊不堪，已經沒有更多的精力放在自己的項目上。現在有點時間了，趕緊做點自己的項目。
俗話說，磨刀不誤砍柴工。先花了一點時間搭建了一下開發環境，這里記錄一下過程及遇到的坑。之前搭建的環境由于webpack 還是 1 ，但現在的版本都升至3.多了，所以腳手架上果斷選擇react官網出的create-react-app,ui上選擇螞蟻金服的 antd-mobile
1. 快速開始：
npm install -g create-react-app /* 安裝create-react-app，建議使用cnpm */
create-react-app geekjc-antd-mobile /* 使用命令創建應用，myapp為項目名稱 */
cd geekjc-antd-mobile /* 進入目錄，然后啟動 */
npm start
注意:這里不提倡用faceback的yarn包管理器，因為筆者一開始用的是yarn，但是項目總是運行不起來^ _ ^ 但后面安裝其它需要的包的時候可以用下yarn 安裝
按以上執行，即可快速創建React開發環境。
打開http://localhost:3000/ 查看，出現如下圖:
2. 環境配置介紹：
2.1 項目結構：
生成項目后，腳手架為了“優雅”... ...隱藏了所有的webpack相關的配置文件，此時查看myapp文件夾目錄，會發現找不到任何webpack配置文件。執行以下命令：
yarn eject
再查看geekjc-antd-mobile 文件夾，可以看到完整的項目結構：
2.2 項目配置介紹
此處需要有npm、webpack的基礎知識，充電傳送門：Webpack——解決疑惑,讓你明白 此篇文章是基于webpack 1.x 版本的，升級2.x版的可以看
查看package.json文件的scripts，
"scripts": {
"start": "node scripts/start.js",
"build": "node scripts/build.js",
"test": "node scripts/test.js --env=jsdom"
}
可知，運行時是直接執行scripts文件目錄下的js文件。
其中start.js為開發環境，build.js為打包腳本。
開發環境，代理請求
查看start.js, Facebook基本為每項配置都寫了詳盡的注釋，
start.js腳本啟動了dev-server, 這里需要了解的是
function addMiddleware(devServer){
... ...
這個函數調用http-proxy-middleware模塊，將代理請求，代理地址在package.json中添加
}
在package.json中添加字段proxy，開發環境下dev-server將會自動轉發請求：
"proxy": "https://www.geekjc.com"
SASS、LESS等CSS預處理器配置
Facebook官方在create-react-app升級到某一版本，突然丟掉了默認對sass、less等預處理器的支持，官方文檔說明
于是，只能自己動手，在config目錄下，webpack.config.dev.js 和 webpack.config.prod.js文件，沒有抽出 loader、postcss之類一般共用的配置，于是，在兩個文件夾都要一起配置，也可以抽出共用部分，以便維護。
這里以webpack.config.dev.js舉例，webpack.config.prod.js一樣配置即可：
LESS-loader：
1、命令行，在當前目錄執行：
npm install less-loader --save-dev
2、找到webpack.config.dev.js文件中 loaders中的加入（值為數組），排除less文件，否則將被'url-loader'捕獲。
{
loader: require.resolve('file-loader'),
exclude: [/\.js$/, /\.html$/, /\.json$/,/\.svg$/, /\.less$/],
options: {
name: 'static/media/[name].[hash:8].[ext]',
},
},
3、loaders新增一項：
{
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的引入及配置
在命令行執行：
npm install antd-mobile --save
3.1 移動端高清方案
因0.8以后的版本引入移動端高清方案，因此需要在webpack等增加相應配置，必須配置！，官方說明
按官方說明配置即可。
3.2 按需引入
為減少打包后體積以及方便書寫，可用babel-plugin-import插件，配置后引入模塊可如下：
import { Button } from 'antd-mobile';
自動引入CSS和JS，無需再引入整個antd-mobile的整個CSS文件
使用如下：
命令行執行：
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. 補充
用create-react--app 結合 antd-mobile有兩種構建方式
具體可以查看在 create-react(-native)-app 中使用
注意查看升級指南，里面很詳細了。
5. 完
至此，一個移動web開發環境就搭建完了 ，如果搭建過程遇到困難的可以查看本項目，項目地址：geekjc-antd-mobile
