如何阻止Babel-loader/Webpack将ES6模块转译为ES5

我来帮你搞定这个问题——要保留ES6模块语法（不转译为ES5的CommonJS/AMD等模块系统），核心是调整Babel的转译规则，同时确保Webpack不对模块语法做额外转换。下面是具体的配置方案和修改后的完整代码：

关键原理 #

Babel的@babel/preset-env预设默认会把ES6的import/export转译为CommonJS语法，这正是我们要禁用的行为。通过设置modules: false，我们可以告诉Babel保留原生ES6模块语法，交给Webpack处理（Webpack本身支持ES6模块，还能借此实现tree-shaking等优化）。

具体配置步骤 #

1. 配置Babel保留ES6模块 #

你可以在项目的.babelrc/babel.config.js中添加这个配置：

// babel.config.js示例
module.exports = {
  presets: [
    ['@babel/preset-env', { modules: false }], // 关键：禁用模块转译
    '@babel/preset-react' // 如果你的项目基于React，保留这个预设
  ]
};

或者直接在Webpack的babel-loader选项中指定（适合不想单独维护Babel配置的场景）。

2. 修改Webpack配置 #

在你的Webpack配置中添加module.rules，确保babel-loader使用上述规则。下面是整合后的完整配置：

const paths = require('./paths');
const publicPath = '/your-public-path/'; // 替换为你的实际publicPath

module.exports = {
  bail: true,
  watch: true,
  target: 'web',
  entry: paths.allLibraryIndexJs,
  output: {
    path: paths.appLibraryBuild,
    filename: '[name].app.js',
    library: '[name]',
    libraryTarget: 'umd',
    publicPath: publicPath
  },
  externals: {
    lodash: {
      commonjs: 'lodash',
      commonjs2: 'lodash',
      amd: 'lodash',
      root: '_'
    },
    react: {
      commonjs: 'react',
      commonjs2: 'react',
      amd: 'react',
      root: 'React'
    },
    'props-types': {
      commonjs: 'props-types',
      commonjs2: 'props-types',
      amd: 'props-types',
      root: 'PropsTypes'
    }
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/, // 排除第三方依赖，避免不必要的转译
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              ['@babel/preset-env', { modules: false }],
              '@babel/preset-react' // 按需保留
            ]
          }
        }
      }
    ]
  }
};

额外说明 #

• 如果你不需要兼容旧浏览器，还可以在@babel/preset-env中添加targets配置，进一步限制转译范围，但这和保留ES6模块语法无关。
• 你的externals配置可以保持不变，它只影响外部依赖的打包方式，不会干扰模块语法的转译。

内容的提问来源于stack exchange，提问作者DrEarnest