Create-react-app+Antd+Less配置

Zysoft發表於2018-05-11
ReactAPP

說明

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。

簡書

相關文章