テクノロジー

【JS】スライダーのSwiperをwebpackで利用する場合

Written by Kishimoto

最近Swiper周りでよく忘れてたので、備忘録として残していきます。

webpackを使って、importで読み込むときにそのまま読み込ませると、IEでシンタックスエラーになって無駄に悩まされた。
なので、忘れないためにもちゃんとメモしておきます。

Swiper 4.x.x以降からしか自分はわかっていませんが、そのあたりから除外設定を除外する必要がでてたみたいです。

webpack設定

// 抜粋
module: {
    rules: [
        {
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: /node_modules\/(?!(dom7|ssr-window|swiper)\/).*/,
            options: {
                presets: [
                    [
                        'env',
                        {
                            modules: false
                        }
                    ]
                ]
            }
        }
    ]
}

webpackのexclude(除外設定)に、Swiper関連を除外しないようにする記述をする。
こちらは公式サイトのほうに除外しないように設定しなさいって書かれてた。英語読めないから完全にスルーしてた。

Getting Started With Swiper
一番下らへんの「As an ES module」ってところに書いてあります。

webpackを設定したらあとは、普通にimportしてビルドすると動くよ。
前は、直接ファイルを指定してimportしてた。

import Swiper from 'swiper';

var mySwiper = new Swiper('.swiper-container');

株式会社MIRAIでは、Webマーケティング・コンサルティングから
ホームページ制作・動画制作など、様々なご相談を承っております。

お仕事のご依頼・ご相談はこちら