aihub-web/ai-modules/labeling-tool-front/babel.config.js

module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        // 防止babel将任何模块类型都转译成CommonJS类型，导致tree-shaking失效问题
        modules: false,
        // 只导入需要的 polyfill
        useBuiltIns: 'usage',
        // 指定 corjs 版本
        corejs: 3,
        targets: {
          browsers: ['last 2 versions'], // 最近 2 个版本的浏览器
        },
      },
    ],
    // 转jsx
    '@babel/preset-react',
    '@babel/preset-typescript',
  ],
  // @babel/runtime-corejs3 是辅助函数
  plugins: [
    // 开发库/工具、移除冗余工具函数(helper function)
    [
      '@babel/plugin-transform-runtime',
      {
        corejs: {
          version: 3,
          proposals: true,
        },
        useESModules: true,
      },
    ],
    ['@babel/plugin-proposal-optional-chaining'], // 解析 可选链式语法
    ['import', { libraryName: 'antd', style: true }], // 关键点: "style": true
  ],
  env: {
    development: {
      plugins: ['dynamic-import-node'],
    },
    production: {
      plugins: [
        // 函数组件中的变量提升到函数外来避免每次重新调用函数组件重复声明和没必要的垃圾回收
        '@babel/plugin-transform-react-constant-elements',
        // https://github.com/facebook/react/issues/3228
        '@babel/plugin-transform-react-inline-elements',
        [
          '@babel/plugin-proposal-decorators',
          {
            legacy: true,
          },
        ],
        [
          'import',
          {
            libraryName: 'antd',
            libraryDirectory: 'es',
            style: 'css',
          },
        ],
      ],
    },
  },
};