メモブログ

技術的なことを書き連ねるブログ

スライダープラグインSwiperがIE11で動かない時の設定

今までは、スライダーのプラグインに 「slick」を使わせてもらっていたのですが、

github.com

最近あまり更新されていないので 「Swiper」というプラグインに乗り換えました。

github.com

機能も沢山あるので、これがあればほぼ困ることはないと思います。

ですが、1点問題があって「ES module」で読み込むとIE11でエラーが出てしまい動きません。

import Swiper from 'swiper';

var mySwiper = new Swiper('.swiper-container', { /* ... */ });

理由は、このページの下の方に書いてあります。

idangero.us

In case you use it as an ES module make sure:

you have enabled Babel or Buble to transpile it to ES5 syntax, you have enabled node modules resolving and babel transpiling for Swiper as it uses Dom7 and ssr-window packages as dependencies.

  • babel or buble? で ES5にトランスパイルします。
  • Swiperは依存関係としてDom7およびssr-windowパッケージを使用するため、node_modulesの解決と、 babelでのトランスパイルを有効にします。

なので、通常であれば、babelでのトランスパイルにおいて、
「node_modules」ディレクトリは除外しますが、
「dom7|ssr-window|swiper」の3つのモジュールはトランスパイルしてね。
とwebpack.configに追記してあげてください。

  module: {
    rules: [
      {
        test: /\.js$/,
        // ここの設定を変更する
        exclude: /node_modules\/(?!(dom7|ssr-window|swiper)\/).*/, 
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: [
                [
                  '@babel/preset-env',
                  {
                    useBuiltIns: 'entry',
                    corejs: 3
                  }
                ]
              ]
            }
          }
        ]
      },