swiperjs es 模块构建在 IE11 浏览器中不起作用

Question

我正在使用 webpack 和 babel 来转译模块，在将 swiper npm 包添加到构建后，IE11 浏览器停止工作，因为 dom7 依赖项未转译适当地。 swiper's get started 页面指出了这一点，但尚不清楚必须采取哪些措施来解决该问题。

Answer 1

经过几天的研究和多次尝试，我终于让它工作了。

重要需要注意的是，您必须使用 babel.config.js 而不是 .babelrc 以便 node_modules 可以包含到构建中。

最终配置：

babel.config.js（仅相关部分）：

module.exports = {
  "presets": [
    ["@babel/env", {
      "targets": {
        "ie": "11"
      }
    }],...

webpack.config.js（仅相关部分）：

test: /\.js$/,
exclude: /node_modules\/(?!(swiper|dom7)\/).*/,
rules: [
   {
     use: [{
       loader: 'babel-loader',
       options: {
         cacheDirectory: true,
         babelrc: false,
         rootMode: 'upward'
       }
     }]
   }
 ]

这篇文章让我找到了正确的方向（请参阅 RyanGosden 的评论）- https://www.bountysource.com/issues/79144083-not-working-in-ie11

希望能帮助其他人节省一些时间！

Answer 2

2022 年更新：

之前的答案是正确的，但 swiper 7 添加了一个名为 ssr-window 的新 esm 依赖项。所以需要添加如下：

webpack.config.js（仅相关部分）：

test: /\.js$/,
exclude: /node_modules\/(?!(swiper|dom7|ssr-window)\/).*/,
rules: [
   {
     use: [{
       loader: 'babel-loader',
       options: {
         cacheDirectory: true,
         babelrc: false,
         rootMode: 'upward'
       }
     }]
   }
 ]

swiperjs es 模块构建在 IE11 浏览器中不起作用

swiperjs es module build doesn't work in IE11 browser

swiper

babeljs

dom7

webpack-4