Create-react-app+Antd-mobile+Less配置(學習中的記錄)

(參考別人結合本身的整理得出,如有錯誤請大神指出)

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/ 

 

環境配置介紹：

1、項目結構：

生成項目後，腳手架爲了「優雅」... ...隱藏了全部的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    /* 主入口文件 */

 

2、項目配置介紹

 

放上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

二、找到webpack.config.dev.js文件中 loaders中的第一項exclude（值爲數組），排除scss文件，不然將被'url-loader'捕獲。

{

exclude: [

    /\.html$/,

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

    /\.css$/,

    /\.json$/,

    /\.svg$/,

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

]

三、loaders新增一項：

{

    test: /\.scss$/,

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

},

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

3、antd-mobile的引入及配置

在命令行執行：

npm install antd-mobile --save

移動端高清方案

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

按需引入

爲減小打包後體積以及方便書寫，使用babel-plugin-import實現Antd按需加載，修改package.json，或者在項目根目錄新建文件.babelrc寫配置，注意是二選一。

import {Picker} from 'antd-mobile';

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

使用以下：

命令行執行：

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

1）package.json

"babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      [
        "import",
        {
          "libraryName": "antd",
          "style": true
        }
      ]
    ]
  },

2）.babelrc

{ "presets": [ "react-app" ], "plugins": [ [ "import", { "libraryName": "antd", "style": true } ] ] }

注意： 不要認爲package.json裏已有presets配置這裏就不用寫，這裏的.babelrc會覆蓋package.json裏帶有的babel配置，若是刪除presets配置，會報錯。

4、雜項

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

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

 

《《後續》》===============================================

 新增對less 的 配置 以及對antd 的修改的兩種方案

一. React-app-rewired（一個對 create-react-app 進行自定義配置的社區解決方案）。

1. 安裝react-app-rewired

npm install --save-dev react-app-rewired

1. 修改package.json啓動項

/* package.json */ "scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired test --env=jsdom", }

1. 在項目根目錄建立一個 config-overrides.js 用於修改默認配置。

module.exports = function override(config, env) { // do stuff with the webpack config... return config; };

1. 使用babel-plugin-import實現Antd按需加載，修改config-overrides.js

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

/* config-overrides.js */ const { injectBabelPlugin } = require('react-app-rewired'); module.exports = function override(config, env) { config = injectBabelPlugin(['import', { libraryName: 'antd', style: 'css'}], config); return config; };

5.使用react-app-rewire-less配置Less

npm install --save-dev react-app-rewire-less

/* config-overrides.js */ const { injectBabelPlugin } = require('react-app-rewired'); const rewireLess = require('react-app-rewire-less'); module.exports = function override(config, env) { config = injectBabelPlugin(['import', { libraryName: 'antd', style: true }], config); config = rewireLess.withLoaderOptions({ modifyVars: { "@primary-color": "#1DA57A" }, })(config, env); return config; };

我遇到的問題：

1. _DEV_ is not defined.

npm install --save-dev react-app-rewire-defind-plugin

/* config-overrides.js */ const { injectBabelPlugin } = require('react-app-rewired'); const rewireLess = require('react-app-rewire-less'); const rewireDefinePlugin = require('react-app-rewire-define-plugin'); module.exports = function override(config, env) { config = injectBabelPlugin(['import', { libraryName: 'antd', style: true }], config); config = rewireLess.withLoaderOptions({ modifyVars: { "@primary-color": "#1DA57A" }, })(config, env); config = rewireDefinePlugin(config, env, { __DEV__: false }); return config; };

1. Cannot read property ‘exclude’ of undefined 參考 https://github.com/timarney/react-app-rewired/issues/145 解決方案 https://github.com/dawnmist/react-app-rewired/commit/25208ab81791edb4356dc959188bcd4c4471ad87

二. npm run eject 暴露全部內建的配置

1. 使用babel-plugin-import實現Antd按需加載，修改package.json，或者在項目根目錄新建文件.babelrc寫配置，注意是二選一。

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

1）package.json

"babel": { "presets": [ "react-app" ], "plugins": [ [ "import", { "libraryName": "antd", "style": true } ] ] },

2）.babelrc

{ "presets": [ "react-app" ], "plugins": [ [ "import", { "libraryName": "antd", "style": true } ] ] }

注意： 不要認爲package.json裏已有presets配置這裏就不用寫，這裏的.babelrc會覆蓋package.json裏帶有的babel配置，若是刪除presets配置，會報錯。

1. 引入Less

1）安裝less-loader 和 less

npm install --save-dev less-loader less

2）修改config文件夾下的webpack.config.dev.js和webpack.config.prod.js文件(都須要修改) 查找 ：exclude 本來的 exclude: [/\.js$/, /\.html$/, /\.json$/], 修改成 exclude: [/\.html$/, /\.(js|jsx)$/, /\.(css|less)$/, /\.json$/, /\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],

查找：test: /.css$/ 本來的 test: /\.css$/, 修改成 test: /\.(css|less)$/,

在這個test的下面找到use，添加loader

 use: [ {...}, {...}, { loader: require.resolve('less-loader') // compiles Less to CSS } ],

ok，以上兩種方式修改配置，擇優選取。 若是引入Antd，可能依賴於引入Less， 若是不想引入Antd，能夠捨棄Antd部分，按步驟引入Less。

 

 

後續 我會把配置好的git 地址貼上  供你們參考，如有不足 請指出