针对IE11的Swiper v4转换失败(使用Webpack 5 + Babel 7)

42fyovps  于 2022-12-08  发布在  Babel
关注(0)|答案(1)|浏览(210)

我构建并推出了我想做的事情的简化版本:
https://github.com/vaxul/swiper4-webpack5-babel7

它应该做什么

当在Internet Explorer 11(IE11)中打开index.html时,Swiper幻灯片显示正常。
发生了什么
IE11抛出错误:

SCRRIPT1002: Syntax error
vendors.js (3135,1)

这是由第3135行中的class声明引起的。
我必须使用Swiper v4,因为它是IE11的最后一个兼容版本。
Webpack 5的当前设置使用来自Bootstrap的Babel 7Browserlist
巴别塔的调试显示:

...

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" }
...

当查看中示例类的结果时,您可以看到类的转换正在运行:
https://github.com/vaxul/swiper4-webpack5-babel7/blob/master/dist/js/source_Slider_mjs.239afbde125d3f32e9af.js#L18
但是它并没有转换node_modules/dom7/dist/dom7.modular.js中提到的class Dom7
目前我不知道为什么它不工作。
从我的Angular 来看,我希望babel-loader将转换所有的代码 * 包括 * 文件从node_modules
我真的希望有人能给我一个提示,给我指明正确的方向。拜托。😊

编辑1

在将.babelrc重命名为babel.config.json并向babel-loader添加少量配置后,class Dom7的代码被正确转换。

但是,现在我在每个浏览器中都遇到了这个问题,错误如下:

ES模块不能分配module.exports或exports.*,请改用ESM导出语法:WA63型

6tdlim6h

6tdlim6h1#

工作版本:https://github.com/vaxul/swiper4-webpack5-babel7
键更改:

  • .babelrc重命名为babel.config.json
  • 更新Webpack配置中babel-loader的选项
  • 设置babelrc: false
  • 不包括core-jswebpack/buildin表单转换,如此处所述

相关问题