(參考別人結合自己的整理得出,若有錯誤請大神指出)

Facebook 官方推出Create-React-App腳手架，基本可以零配置搭建基於webpack的React開發環境，內置了熱更新等功能。

詳細文檔可前往鏈接：Create-React-App文檔

本文將介紹使用Create-React-App腳手架搭建antd-mobile的開發環境。

快速開始：

npm install -g create-react-app       /* 安裝create-react-app，建議使用cnpm */

create-react-app myapp                 /* 使用命令創建應用，myapp為項目名稱 
 
*/

cd myapp                                        /* 進入目錄，然後啟動 */

npm start                                    /*啟動運行*/

按以上執行，即可快速創建一個React開發環境。

會自動打開默認瀏覽器 http://localhost:3000/

環境配置介紹：

一、項目結構：

生成項目後，腳手架為了“優雅”... ...隱藏了所有的webpack相關的配置文件，此時查看myapp文件夾目錄，會發現找不到任何webpack配置文件。執行以下命令：

npm run eject

查看myapp 文件夾，可以看到完整的項目結構：

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/

        <b>build.js</b>    /*打包命令配置文件*/

        <b>start.js</b>    /*啟動命令配置文件*/

        test.js

    src
 
/

        App.js

        index.js    /* 主入口文件 */

二、項目配置介紹

放上webpack 、npm 的充電傳送門： 【webpack學習教程】

查看package.json文件的scripts，

"scripts": {

    "start": "node scripts/start.js",

    "build": "node scripts/build.js",

},

可知，運行時是直接執行scripts文件目錄下的js文件。

其中*start.js*為開發環境，*build.js*為打包腳本。

build.js 此處打包 生成的 文件 路徑引用有問題

解決方法在另外一片文章中react.js - 基於create-react-app的打包後文件根路徑修改

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一樣配置即可：

SASS-loader：

npm install sass-loader node-sass --save-dev

2、找到webpack.config.dev.js文件中 loaders中的第一項exclude（值為數組），排除scss文件，否則將被‘url-loader‘捕獲。

{

exclude: [

    /\.html$/,

    /\.(js|jsx)(\?.*)?$/,

    /\.css$/,

    /\.json$/,

    /\.svg$/,

    /\.scss$/     ....新增項!

]

3、loaders新增一項：

{

    test: /\.scss$/,

    loader: ‘style!css!postcss!sass?outputStyle=expanded‘

},

至此，SASS文件就可以正常打包了（此處針對SCSS文件，如用到SASS，可將SCSS的正則修改下），LESS文件類似，不再贅述。

三、antd-mobile的引入及配置

在命令行執行：

npm install antd-mobile --save

移動端高清方案

因0.8以後的版本引入移動端高清方案，因此需要在webpack等增加相應配置，**必須配置！**，官方說明 按官方說明配置即可。

按需引入

為減少打包後體積以及方便書寫，可用babel-plugin-import插件，配置後引入模塊可如下：

import {Picker} from ‘antd-mobile‘;

自動引入CSS和JS，無需再引入整個antd-mobile的整個CSS文件

使用如下：

命令行執行：

npm install babel-plugin-import --save-dev

安裝完畢後，在根目錄新建文件，命名: .babelrc.js

{

  "presets": [

    "es2015",

    "react"

  ],

  "plugins": [

    [

      "import",

        {

          "libraryName": "antd-mobile",

          "style": "css"

        }

      ]

    ]

}

在文件內輸入以上內容，為babel的配置。

然後！！！最重要的一步，把package.json中的babel配置給刪掉，尤其是：react-app！！！

webpack.config.dev.js和webpack.config.prod.js中，都需要為resolve的extensions新增一項‘.web.js‘

antd-mobile的web版的文件後綴為.web.js ...

四、雜項

React-Router版本

現在最新版本React-Router為4.x.x，與原用的2.x.x的API變化稍大（官方直接跳過了3...），如需使用2.x.x版本，可先卸載router,執行命令

pm remove react-router --save

然後在package.json中dependencies新增字段：

"react-router": "^2.0.0 < 3.0.0",

接著執行：

npm install

到這裏，就算搭建完開發環境了，可以正常進行開發了。

大部分參考 :簡書 邱鵬城, 如有轉載請@出處

Create-React-App創建antd-mobile開發環境(學習中的記錄)