如何将babel loader与本机es6模块一起使用？

Question

我正在静态站点上使用本机es6模块。

<script type="module" src="./main.js"></script>

在部署之前，我通过Babel传递js文件

//网页包。配置。js

rules: [
  {
    test: /\.js$/i,
    exclude: /node_modules/,
    use: ['babel-loader'],
  }
]

//. babelrc

  {
      "presets": [
        [
          "@babel/preset-env",
          {
            "modules": false,
          }
        ]
      ]
    }

默认情况下，babel会将模块转换为公共js，尽管我的代码中有一个标志“modules”：false。巴别塔

我不想让babel把模块变成通用的，我只想把除了导入和导出之外的所有东西都变成es2015，这样我就可以在浏览器中使用原生模块了

像这样：//main.js之前

export default () => {
  return 'Hello world!'
}

Babelmain.js

export default function () {
  return 'Hello world!'
}

根据文档，巴贝尔提供了一个模块：false选项，但它不适合我

此外，无法与supportsStaticESM合作

  {
    test: /\.js$/i,
    exclude: /node_modules/,
    use: {
      loader: 'babel-loader',
      options: {
        presets: ['@babel/preset-env'],
        caller: {
          supportsStaticESM: true
        }
      }
    }
  }

然而，当我使用babel cli时，我得到了我所需要的！

在这种情况下，我认为webpack对babel不友好

谢谢。

"babel-loader": "8.0.5"
"webpack": "^5.40.0"

Answer 1

如果它适用于Babel，但不适用于Webpack，那么Webpack配置很可能会覆盖Babel的设置。

请尝试从网页配置（如果存在）中删除预设：['@babel/preset env']，。

Answer 2

对我来说，仅仅指定target就成功了。

module.exports = {
    entry: './js/index.js',
    // ...
    target: ['web', 'es5']
}