- 目标，同时配置antd和antd-mobile的按需引入
原本只引入了antd，如下是confing-overrides.js配置文件
const { injectBabelPlugin } = require('react-app-rewired');
module.exports = function override(config, env) {
// do stuff with the webpack config...
config = injectBabelPlugin(
['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }],
config,
);
return config;
};
然后又用到了antd-mobile的Picker组件，所以此时需要将antd-mobile也配置进去。
开始是做了个数组
config = injectBabelPlugin(['import', [
{
libraryName: "antd-mobile",
style: true
},
{
libraryName: 'antd',
style: true
}
]], config);
然后重新npm start，访问页面报错了
./src/index.js
Error: .plugins[0][1] must be an object, false, or undefined
at Array.forEach (<anonymous>)
at Array.forEach (<anonymous>)
最终还是官网权威。最新的版本不支持数组形式了。
官网说明
但是官网给的例子感觉还是不清晰，最后结合其他文章给搞定了
正确的confing-overrides.js
const { injectBabelPlugin } = require('react-app-rewired');
module.exports = function override(config, env) {
// do stuff with the webpack config...
config = injectBabelPlugin(
['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }, "ant"],
config,
);
config = injectBabelPlugin(
['import', { libraryName: 'antd-mobile', libraryDirectory: 'es', style: 'css' }, "antd-mobile"],
config,
);
return config;
};
重点是为每个config加了个name，如上所示的两个import开头行末尾的"ant"和"antd-mobile”。否则会报如下错误
./src/index.js
Error: Duplicate plugin/preset detected.
If you'd like to use two separate instances of a plugin,
they need separate names, e.g.
plugins: [
['some-plugin', {}],
['some-plugin', {}, 'some unique name'],
]
