申明

React官方腳手架東西Create-react-app 用於疾速建立React運用，但照舊有局限性，我們依據項目需求須要對Create-react-app的設置舉行修正。這裏針對引入Antd的兩種設置體式格局舉行設置。

計劃

一. React-app-rewired（一個對 create-react-app 舉行自定義設置的社區解決計劃）。
1.裝置react-app-rewired

npm install –save-dev react-app-rewired

2.修正package.json啟動項

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

3.在項目根目錄建立一個 config-overrides.js 用於修正默許設置。

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

4.運用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;
};

2.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設置，會報錯。

2.引入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
底本的 test: /\.css$/,
修正為 test: /\.(css|less)$/,

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

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

ok，以上兩種體式格局修正設置，按需挑選。
我比較鐘意第二種方法，畢竟暴露了webpack設置，更天真。
假如引入Antd，能夠依賴於引入Less，
假如不想引入Antd，能夠捨棄Antd部份，按步驟引入Less。

簡書