【webpack】slickをnpmで読み込む方法【cssも読み込む】

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

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

必要な環境

必要な環境は下記です。

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

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

node -v

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

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

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

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

早速slickを使えるようにする

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

npm i slick-carousel

slickはjQueryを使うので、一緒にインストールします。

npm i jquery

CDNでjQueryを読み込んでいる人は消しておきましょう。

<head>
  <!-- 消す -->
  <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
</head>

後は、読み込んで使うだけです。

import $ from 'jquery';
import 'slick-carousel';

$('.your-class').slick();

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 },
          },
        ],
      },
    ]
  },
  plugins: [
  ],
  output: {
    filename: "bundle.js"
  },
};

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

import $ from 'jquery';
import 'slick-carousel';
import 'slick-carousel/slick/slick.css'; // 追加
import 'slick-carousel/slick/slick-theme.css'; // 追加

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

【おまけ】jQueryをどこでも使えるようにしておく

jsファイル内でimportしなくてもjQueryを使えるようにすることができます。

webpack.config.jsを編集します。

const webpack = require('webpack');

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 },
          },
        ],
      },
    ]
  },
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    }),
  ],
  output: {
    filename: "bundle.js"
  },
};

1行目:const webpack = require('webpack');を忘れないように注意です。

これで、自動的にjQueryが読み込まれるようになるので、各jsファイル内ではimport不要になります。

// import $ from 'jquery'; 要らない
import 'slick-carousel';

お疲れ様でした!

まとめ

・Slickをwebpackで使えるようになる。
・js、css両方ともimportできる。

この記事を書いた人

のせっち

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