のせっち 
こんにちは！のせっち@nosecchi01です。
jQueryスライダーとして有名なslickをnpmで読み込む方法の解説です。
必要な環境
必要な環境は下記です。
- node.js
- webpackなどのビルドツール
nodeが入っているかどうかは、ターミナルで確認できます。
node -v入っていなければ、下記からダウンロードします。
ビルドツールはwebpackを前提として解説していきます。
持っていない方は、gulpとの組み合わせになりますが、こちらの記事で解説しています。
また、ICS MEDIAさんの記事は宇宙一わかりやすいのでオススメです。
早速slickを使えるようにする
slickをインストールします。
npm i slick-carouselslickはjQueryを使うので、一緒にインストールします。
npm i jqueryCDNで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-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 },
},
],
},
]
},
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できる。