swiperをnpmで読み込みこむときにハマりがちなポイント【webpack】

こんにちは!のせっち@nosecchi01です。

jQuery非依存のスライダーとして有名なswiperをnpmで読み込む方法の解説です。

swiperをnpmで使うにはいくつか注意点があるので合わせて解説します。

必要な環境

必要な環境は下記です。

  • node.js
  • webpackなどのビルドツール

nodeが入っているかどうかは、ターミナルで確認できます。

node -v

入っていなければ、下記からダウンロードします。

ビルドツールはwebpackを前提として解説していきます。

持っていない方は、gulpとの組み合わせになりますが、こちらの記事で解説しています。

また、ICS MEDIAさんの記事は宇宙一わかりやすいのでオススメです。

swiperを使えるようにする【注意点含む】

swiperをインストールします。

npm i swiper

後は、読み込んで使うだけなのですが、1点注意が必要です。

import Swiper from 'swiper';

const option = {
  loop: true,
  autoplay: true,
}

const swiper = new Swiper('.mySwiper', option);

1行目、import Swiper from 'swiper';だと使える機能が大幅に制限されてしまいますので、全ての機能を使うには下記のように記述します。

// import Swiper from 'swiper'; 最小限の機能しか入っていない
import Swiper from 'swiper/bundle'; // 全ての機能が入っている

const option = {
  loop: true,
  autoplay: true,
}

const swiper = new Swiper('.mySwiper', option);

必要な機能だけ個別に指定することも可能です。

// コアバージョンに加えて、ナビゲーションとページネーションを追加する
import Swiper, { Navigation, Pagination } from 'swiper';

// モジュールを使用可能に
Swiper.use([Navigation, Pagination]);

const option = {
  pagination: {
    el: '.swiper-pagination',
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
}

const swiper = new Swiper('.mySwiper', option);

CSSもwebpackで読み込みたい場合

cssもwebpackで使いたい場合は、css-loaderstyle-loaderが必要です。

npm i -D css-loader style-loader

なぜこの2つが必要か?について、ものすごくざっくり説明します。

  • css-loaderで、js内でcssを扱えるようにする。
  • style-loaderで、<style>タグとしてcssをhead内に差し込む(デフォルトの場合)

jsの世界でcssを解釈してもらい、そのスタイルを適用させるためにセットで必要なんだな、くらいで理解していただければいいかと!

さて、
css-loaderstyle-loaderがインストールできたら、webpack.config.jsに設定を追加します。

module.exports = {
  mode: "production",
  entry: `./src/js/app.js`,
  module: {
    rules: [
      {
        // node_module内のcss
        test: /node_modules\/(.+)\.css$/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
            options: { url: false },
          },
        ],
        sideEffects: true, // production modeでもswiper-bundle.cssが使えるように
      },
    ]
  },
  plugins: [
  ],
  output: {
    filename: "bundle.js"
  },
};

では、cssを読み込みます。

import Swiper from 'swiper/bundle';
import 'swiper/swiper-bundle.css';

これで、swiperをnpmからインストールして、js、cssを両方使うことができます。

swiperをIE対応させる【babelに記述を追加】

swiperはver5.0.0以降IE対応をしていませんので、babelでトランスパイルが必要です。

まずはbabel系のpackageをインストールします。

npm i -D babel-loader @babel/preset-env @babel/core

次にwebpack.config.jsに記述を追加します。

module: {
  rules: [
    {
      test: /\.js$/,
      // IE対応 除外設定にSwiperを含めない
      exclude: /node_modules\/(?!(dom7|ssr-window|swiper)\/).*/,
      use: [
        {
          // Babel
          loader: 'babel-loader',
          options: {
            presets: [
              // ES2020 を ES5 に変換
              '@babel/preset-env',
            ]
          }
        }
      ]
    },
  ]
},

お疲れ様でした!

まとめ

・swiperをwebpackで使えるようになる。
・jsは使いたい機能によってimport文が異なる(全ての機能はswiper/bundle)
・babelを使う際は、excludeにswiperを追加する

この記事を書いた人

のせっち

福岡県出身。早稲田大学卒。創業100年の鉄鋼商社でバンコク駐在最年少抜擢。毎日擦り切れるまで働かなくても幸せに生きている人々を見てフリーランスになりました。
現在は、主にバンコクでWeb制作、物販を中心に生きています。