【发布时间】:2020-12-09 19:46:09
【问题描述】:
我构建并推送了我想做的简化版本:
https://github.com/vaxul/swiper4-webpack5-babel7
应该怎么做
在 Internet Explorer 11 (IE11) 中打开 index.html 时,带有 Swiper 的幻灯片正在运行。
发生了什么
IE11报错:
SCRRIPT1002: Syntax error
vendors.js (3135,1)
这是由line 3135 中的class 声明引起的。
我必须使用Swiper v4,因为它是 IE11 的最后一个兼容版本。
Webpack 5 的当前设置使用来自 Bootstrap 的 Babel 7 和 Browserlist。
babel 的调试显示:
...
Using targets:
{
"android": "4.4",
"chrome": "45",
"edge": "12",
"firefox": "38",
"ie": "10",
"ios": "9",
"opera": "30",
"safari": "9",
"samsung": "12"
}
...
Using plugins:
...
transform-classes { "android":"4.4", "chrome":"45", "edge":"12", "firefox":"38", "ie":"10", "ios":"9", "opera":"30", "safari":"9" }
...
当查看example class 的结果时,您可以看到类的转换正在运行:
https://github.com/vaxul/swiper4-webpack5-babel7/blob/master/dist/js/source_Slider_mjs.239afbde125d3f32e9af.js#L18
但它并没有将提及 class Dom7 从 node_modules/dom7/dist/dom7.modular.js 转换。
目前我不知道为什么它不起作用。
从我的角度来看,我希望babel-loader 将转换所有代码包括来自node_modules 的文件。
我真的希望有人对我有提示并指出我正确的方向。请。 ????
编辑 1
将.babelrc重命名为babel.config.json并在babel-loader中添加little configuration后,class Dom7的代码转换正确。
但是,现在我在每个浏览器中都遇到了错误:
ES 模块不能分配 module.exports 或 exports.*,使用 ESM 导出语法,而不是:WA63
【问题讨论】:
-
感谢您的回复。它有一点帮助,但它产生了编辑 1 中描述的以下错误。
-
我发现了这个问题,并将其作为答案发布。再次感谢您的帮助。
标签: javascript webpack babeljs swiper babel-loader