Bootstrapをnodejsで利用するために調べたこと

BootStrap使ってカッコつけたい

今回、掲示板アプリ作成してます。
javascriptとhtmlとcssで出来ないこともないけど、せっかくならプラスオンして新しい技術に触れたいと思い、色々調べた結果bootstrapにたどり着きました。

ドキュメントを読んでサラッと使えると思いきや、
豪快につまづいてもがいていました。

「webpack」が必要みたい。

今回の引用と参考サイトはこちらです。
神の手が差し出された瞬間です。
とってもわかりやすかった。
最新版で学ぶwebpack 5入門 Bootstrapをバンドルする方法

webpackは簡単に言えば、複数のJavaScriptを1つにまとめること。
1つにまとめることができれば、htmlやejsへの適用もシンプルになります＾＾
javascriptだけではなく、sassファイルやcssファイルもloaderと呼ばれるモジュールをインストールすることで,webpackで1つにまとめることが出来る優れものです。

今回、bootstrapをnode.jsに適用するまでの3ステップをメモ

1.モジュールのインストール

npm i -D webpack webpack-cli style-loader css-loader

2.bootstrapを動かすためのライブラリをインストール

npm i -S bootstrap jquery popper.js

ドキュメントにはjqueryとpopperに依存しているので、言われるがままにインスト

3.webpackの設定と実行

webpack.config.jsにファイルの処理方法を記述します。
ここでは、単純に調理方法を記載していると考えてください。

module.exports = {
  // モード値を production に設定すると最適化された状態で、
  // development に設定するとソースマップ有効でJSファイルが出力される
  mode: "production",
  module: {
    rules: [
      {
        // 対象となるファイルの拡張子(cssのみ)
        test: /\.css$/,
        // Sassファイルの読み込みとコンパイル
        use: [
          // スタイルシートをJSからlinkタグに展開する機能
          "style-loader",
          // CSSをバンドルするための機能
          "css-loader"
        ],
      },
    ],
  },
};

次に食材を用意します。

srcフォルダー内にindex.jsファイルを作成。
index.jsファイルにはimport文を用いて、Bootstrapを取り込みます。

// Bootstrapのスタイルシート側の機能を読み込む
import "bootstrap/dist/css/bootstrap.min.css";

// BootstrapのJavaScript側の機能を読み込む
import "bootstrap";

最後に食材と調理方法が準備できれば早速調理開始です。

npx webpack

と実行すると、
'dist'フォルダが生成され、一つになったjsファイルが生成されます。
これを同じようにhtmlまたはejsファイルに取り込みすれば、環境設定は完了です。
bootstrapドキュメントのレイアウトのコピーを貼り付けすれば、使えるようになります。

まとめ

かなりざっくりすぎてビックリですが、忘備録として残しておきます。
webpackの記述方法は、後に身につけたいなと思います。