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

Question

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

方法1

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        
    })
);

​

方法2

​

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(插件)示例：

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"
  })
);