近頃はどのGitHubリポジトリでもnpmやらyarnやらでインストールする方法が紹介されていますよね。npmはgulpやwebpackで使っているものの、フロントのライブラリにnpmを使う必要性がよくわからず普通にscriptタグで読み込んでいました。でも試しもせず従来のやり方を続けているのも進歩がないなと試してみたところ、以外にも良さげだったのでやり方をメモ。

slickをnpmで使う

今回、npmでの使用を試したのは「slick」という有名なスライダー用のライブラリです。こちらはjQueryに依存したプラグインなのでjQueryもnpmで導入してしまいます。まずは作業用のディレクトリ（ここではdev-slickとします）を作り、npmを使うための準備をします。ターミナルで実行するコマンドは下記の通り。

$ mkdir dev-slick
$ cd dev-slick
$ npm init -y

するとpackage.jsonというファイルが作られるはず。ファイルができていたら続いてjQueryとslickをインストールします。slickの方は名称が「slick-carousel」である点に注意。

$ npm install -D jquery
$ npm install -D slick-carousel

これでslickを使う準備ができました。あとはwebpackなどを使えばjsファイル内でモジュールとして使用できます。jsファイル内の記述はこんな感じ。

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

window.addEventListener('load', () => {
  $('#target').slick();
});

html側でscriptタグの順番を気にする必要もなければ記述する必要すらない。今まではライブラリを公開用ディレクトリにcopyとかしていましたが、それも必要なくなるので色々と面倒ごとが減らせてハッピー。いまのところデメリットもとくになさそうなので、これからは積極的にフロントのライブラリもnpmで使っていこう思います。