npmでBootstrapをインストールしてWebpackでコンパイルする方法(同時にjQueryも)

ホームページを作る時、BootstrapとJQueryを使う機会が多いんですが、今までは、それぞれのCDNから読み込んで使っていました。
今回は、npmを使ってプロジェクトに直接インストールしてみます。Bootstrapは、JQueryに依存しているので、JQueryも一緒にインストールします。

全体的な流れとしては、

・node.js(npm)のインストール
・webpackの導入
・BootstrapとJQueryのインストール
・コンパイルと読み込み

となります。
必要最低限の内容なので、いろいろカスタマイズしたい場合は、他にパッケージや設定が必要です。

node.js(npm)のインストール

まず、node.jsをインストールします。同時にnpmも入ります。
公式からインストーラーをダウンロードして、PCにインストールします。

node.js公式
https://nodejs.org/ja/

webpackの導入

Bootstrapなどをインストールして使うには、コンパイラー(生のスクリプトをコンピュータ言語に変換するためのツール)が必要です。今回はwebpackを使います。

プロジェクトフォルダに移動して以下の手順でコマンドを入力していきます。ここから先は、ターミナル(コマンドプロンプトなど)からの操作になります。

npmのセットアップ(初期化)

-yesオプションを付けると、セットアップ項目が全てデフォルトで設定されます。(付けない場合は、項目毎にEnterを押すか入力が必要)

実行後、プロジェクトフォルダ内に、以下のファイルが作成されます。

package.json

webpackのインストール

-g:グローバルインストール--save-dev:プロジェクト単位インストール

実行後、プロジェクトフォルダ内に、以下のファイルが作成されます。

node_modules(フォルダ)
package-lock.json

WARN(WARNING)がいくつか出ているかもしれませんが、気にしなくて大丈夫です。
ERRORが出ている場合は、エラー内容でググって解決しましょう。
以下のインストール手順でも、WARNINGが出る場合がありますが、問題ありません。

webpack-cliのインストール

webpack4以降はインストール必須。

他に必要なパッケージのインストール

style-loadercss-loaderもスタイルシート読み込みに必要なので、インストールしておきます。

BootstrapとJQueryのインストール

BootstrapとJQueryをインストールします。
一緒に、popper.jsというライブラリも入れておきましょう。

コンパイル

すべてのインストールが終わったら、実際にコンパイルしてみましょう。

コンパイルに必要なファイルやフォルダの作成

プロジェクトフォルダ内に、下記のファイルを用意します。

src:コンパイル前の生のスクリプトを置くフォルダ
dist:コンパイル後に書き出すフォルダ
webpack.config.js:webpack設定ファイル
index.js:生のスクリプト(ファイル名は任意)

index.jsは、「src」フォルダ内に作成します。
全体のディレクトリ構造はこんな感じ。

[プロジェクト]
     ├dist/
     ├node_modules/
     ├src/
     │ └ index.js
     ├ package.json
     ├ package-lock.json
     └ webpack.config.js

本番では、「dist」や「src」の中に「js」フォルダを作るなどして、自分で扱いやすいように作ってください。

webpack.config.jsの作成

webpackの設定ファイルを作成します。
以下の内容で新規にファイルを作りましょう。

index.jsの作成

コンパイルしたいjsファイルを用意します。
とりあえず、以下のようにBootstrapを読み込んでみます。

コンパイル実行

ここまで出来たら、いよいよコンパイルです。
以下のコマンドでコンパイルを実行。

npmではなくてnpxなので注意。

「dist」フォルダに、index.jsファイルが書き出されていれば成功です。

node.jsのバージョンが古い場合

上記のコマンドで、npxが入ってないよと言われた場合は、インストールしましょう。

【便利な設定】コマンドのカスタマイズ

実行コマンドを自分で設定する事ができます。
先程作成した、package.json"scripts":の部分に、

上記のように追記すると、

で、コンパイルを実行できるようになります。

この場合は、便利さを感じませんが、もっと長いコマンドなどを登録すれば、ワード1つで実行できるようになるので便利です。

読み込みと確認

JQueryやスタイルシートも一緒にコンパイルされているので、出力されたindex.jsファイル1つを読み込めば、BootstrapとJQueryが使えるようになっているはずです。

まとめ

今回は、Bootstrapをインストールするための最低限の工程をまとめてみましたが、本来は、Bootstrapをカスタマイズしたり、カスタムcssなどもコンパイルできると幅が広がるのかも知れません。
ただBootstrapを使いたいだけなら、CDNかダウンロードして読み込むだけの方が、簡単でいいのかなって思いました。