如何在原生es6模块中使用babel-loader？
如何在原生es6模块中使用babel-loader？
提问于 2021-09-13 06:52:04
我在静态站点上使用原生es6模块。
<script type="module" src="./main.js"></script>在部署之前，我通过babel传递js文件。
// webpack.config.js
rules: [
{
test: /\.js$/i,
exclude: /node_modules/,
use: ['babel-loader'],
}
]// .babelrc
{
"presets": [
[
"@babel/preset-env",
{
"modules": false,
}
]
]
}默认情况下，babel会将模块转换为通用的js，尽管我的.babelrc中有一个“模块”标志: false
我不希望babel将模块转换为commonjs，我只想在es2015中转换除了导入和导出之外的所有内容，这样我就可以在浏览器中使用本机模块
像这样: // main.js之前
export default () => {
return 'Hello world!'
}//巴别塔后的main.js
export default function () {
return 'Hello world!'
}根据文档，babel提供了一个module: false选项，但它不适用于我
此外，不能使用supportsStaticESM的调用者
{
test: /\.js$/i,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
caller: {
supportsStaticESM: true
}
}
}
}然而，当我使用babel-cli时，我得到了我需要的东西！
我认为在这种情况下，webpack对巴别塔并不友好。
谢谢。
"babel-loader": "8.0.5"
"webpack": "^5.40.0"回答 2
Stack Overflow用户
发布于 2021-09-13 06:59:16
对我来说，只需指定target就行了。
module.exports = {
entry: './js/index.js',
// ...
target: ['web', 'es5']
}Stack Overflow用户
发布于 2021-09-13 21:07:08
如果它可以与巴别塔一起使用，但不能与Webpack一起使用，那么很可能是Webpack的配置覆盖了巴别塔中的设置。
请尝试从Webpack配置中删除presets: ['@babel/preset-env'], (如果存在)。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69158455
复制相关文章
相似问题
腾讯云开发者
