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の記述方法は、後に身につけたいなと思います。