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

投稿日 2021年2月4日
著者のせっち
カテゴリープログラミング

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

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

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

必要な環境

必要な環境は下記です。

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

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

node -v

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

Node.js

Node.js® is a JavaScript runtime built on Chrome

nodejs.org

ビルドツールは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-loaderとstyle-loaderが必要です。

npm i -D css-loader style-loader

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

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

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

さて、
css-loaderとstyle-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',
            ]
          }
        }
      ]
    },
  ]
},

お疲れ様でした！