javascript - 如何在 ReactJS 中使用 fixBabelImports 导入多个 ui 库

Question

我正在尝试将两个 ant design ui 库与 fixBabelImports 一起使用，即Ant Design(for desktop browser)和Ant Design Mobile(for mobile browser)。我尝试了以下方法，两者都没有控制台错误，但我不确定哪种方法是正确的。

方法一

const { override, fixBabelImports, addLessLoader } = require('customize-cra');

const theme = require('./package.json').theme;

module.exports = override( 
    fixBabelImports('antd', {
        libraryName: 'antd',
        libraryDirectory: 'es',    
        style: true,
      }),
    fixBabelImports('import', {
        libraryName: 'antd-mobile',
        style: true
    }), 
    addLessLoader({
        javascriptEnabled: true        
    })
);

方法二

const { override, fixBabelImports, addLessLoader } = require('customize-cra');

const theme = require('./package.json').theme;

module.exports = override(     
    fixBabelImports('import', {
        libraryName: ['antd-mobile', 'antd'],
        style: true
    }), 
    addLessLoader({
        javascriptEnabled: true
    })
);

Answer 1

根据customize-cra的API docs，方法1是对的。

文档中 addExternalBabelPlugins(plugins) 的示例：

module.exports = override(
  disableEsLint(),
  ...addExternalBabelPlugins(
    "babel-plugin-transform-do-expressions",
    "@babel/plugin-proposal-object-rest-spread"
  ),
  fixBabelImports("lodash", {
    libraryDirectory: "",
    camel2DashComponentName: false
  }),
  fixBabelImports("react-feather", {
    libraryName: "react-feather",
    libraryDirectory: "dist/icons"
  })
);