react-app-shell/loki-scripts/config/babel.config.js

react打包脚本和example, 这里的版本请忽略

const lokiConfig = require('./loki.config');
const paths = require('./paths');

const pkg = require(paths.appPackageJson);
const dependencies = pkg.dependencies || {};
const devDependencies = pkg.devDependencies || {};

// 所有的依赖
const deps = Object.keys(dependencies).concat(Object.keys(devDependencies));

// 自定义babel插件
const customPlugins = lokiConfig.babelConfig.plugins;

/**
 * babel配置选项
 */
const config = {
  plugins: [
    require.resolve('babel-plugin-lodash'),

    // ref https://github.com/tc39/proposal-optional-chaining
    require.resolve('@babel/plugin-proposal-optional-chaining'),

    [
      require.resolve('@babel/plugin-proposal-decorators'),
      {legacy: true},
    ]
  ].concat(customPlugins),

  presets: [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage",
        "corejs": 3
      }
    ],
    require.resolve('babel-preset-react-app'),
  ]
};

/**
 * 判断项目中的依赖里 是否有mobx依赖, 如果有, 则添加插件 @babel/plugin-transform-async-to-generator
 */
if (deps.indexOf('mobx') > -1) {
  config.plugins.push(
    [
      require.resolve('@babel/plugin-transform-async-to-generator'), // async 转为 generator
      {
        module: 'mobx',
        method: 'flow',
      },
    ],
  );
}

/**
 * 如果有 antd 的依赖
 */
if (deps.indexOf('antd') > -1) {
  config.plugins.push(
    [
      require.resolve('babel-plugin-import'),
      {
        libraryName: 'antd',
        style: 'css',
      },
      'ant'
    ]
  );
}

/**
 * 如果有 antd-mobile 的依赖
 */
if (deps.indexOf('antd-mobile') > -1) {
  config.plugins.push(
    [
      require.resolve('babel-plugin-import'),
      {
        'libraryName': 'antd-mobile',
        'style': 'css'
      },
      'antd-mobile'
    ]
  );
}

module.exports = config;