如何配置babel-loader处理原生ES6模块时保留import/export语法

你之前的配置不生效的核心原因是：webpack 默认会接管所有模块的解析与转换，即便 babel 不将 ES 模块转为 CommonJS，webpack 也会自动处理 import/export 语句，替换为自身的模块 runtime 实现，不会保留原生 ESM 语法。babel-cli 处理时没有 webpack 介入，所以能得到预期结果。

• 第一步：配置 webpack 输出原生 ESM 格式
  webpack 5 支持直接输出原生 ES 模块，需要在配置中添加对应参数，你使用的 5.40.0 版本需要先开启对应实验特性：

// webpack.config.js
module.exports = {
  // 开启ESM输出实验特性
  experiments: {
    outputModule: true
  },
  output: {
    // 启用原生ESM输出
    module: true,
    // 其余output配置保持原有设置即可
    filename: '[name].js'
  },
  // 其余原有配置保留
}

• 第二步：统一 babel 配置优先级，确保 modules: false 生效
  你之前在 webpack 的 babel-loader 配置中重新声明了 presets: ['@babel/preset-env']，会覆盖 .babelrc 中对应 preset 的参数，二选一修改即可：
  方案1：删掉 babel-loader options 中的 presets 配置，让 babel 优先读取 .babelrc 配置：

// webpack.config.js 中的module.rules配置
rules: [
  {
    test: /\.js$/i,
    exclude: /node_modules/,
    use: {
      loader: 'babel-loader',
      options: {
        caller: {
          supportsStaticESM: true
        }
      }
    }
  }
]

方案2：直接在 babel-loader 配置中完整声明 preset 参数：

// webpack.config.js 中的module.rules配置
rules: [
  {
    test: /\.js$/i,
    exclude: /node_modules/,
    use: {
      loader: 'babel-loader',
      options: {
        presets: [
          [
            "@babel/preset-env",
            {
              "modules": false
            }
          ]
        ],
        caller: {
          supportsStaticESM: true
        }
      }
    }
  }
]

• 第三步：如果不需要 webpack 合并打包多个文件，仅需要对单个 JS 文件做转译输出，将 entry 配置为对应文件即可：

// webpack.config.js
module.exports = {
  entry: './main.js',
  // 其他配置同上
}

调整配置后重新构建，输出的JS文件会保留export/import语句，仅转换其他ES6+语法为兼容版本，符合浏览器原生ESM加载的要求。

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