說明
React官方腳手架工具Create-react-app 用于快速創建React應用，但依舊有局限性，我們根據項目需求需要對Create-react-app的配置進行修改。這里針對引入Antd的兩種配置方式進行配置。
方案
一. React-app-rewired（一個對 create-react-app 進行自定義配置的社區解決方案）。
- 安裝react-app-rewired
npm install --save-dev react-app-rewired
- 修改package.json啟動項
/* package.json */
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test --env=jsdom",
}
- 在項目根目錄創建一個 config-overrides.js 用于修改默認配置。
module.exports = function override(config, env) {
// do stuff with the webpack config...
return config;
};
- 使用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;
};
我遇到的問題：
- _DEV_ is not defined.
npm install --save-dev react-app-rewire-define-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;
};
- 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 暴露所有內建的配置
- 使用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配置，會報錯。
- 引入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。
