babel import多个插件的按需引入

• 目标，同时配置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>)

最终还是官网权威。最新的版本不支持数组形式了。

官网说明

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'],
  ]