あいつの日誌β

働きながら旅しています。

Webpack tutorial to use Bootstrap (Part3)

おさらい

Part1 では ES2015 なコードを webpack で使う手順を紹介しました。
Part2 では Bootstrap の CSS を導入する手順を紹介しました。
Part3 では Bootstrap の Javascript を使っている Components を使用する手順を紹介します。

Lesson5: グローバル変数jQuery を配置する

Bootstrap は グローバル変数jQuery が存在することを前提としたライブラリなのでまずは jQuery を用意します。

% npm install jquery --save 

グローバル変数jQuery を配置する

     { test: /\.eot$/, loader: 'url-loader?mimetype=application/font-woff' },
     { test: /\.ttf$/, loader: 'url-loader?mimetype=application/font-woff' }
     ],
-  }
+  },
+  plugins: [
+    new webpack.ProvidePlugin({
+      jQuery: 'jquery',
+      $: "jquery"
+    })
+  ]
 };

それでは試しに jQuery を使ってみます: edit src/app.js

+
+$('h1').click(function(){
+  console.log('clicked');
+});
+

動作確認。 h1 をクリックすると console に clicked が出力されるはずです。

% $(npm bin)/webpack-dev-server

Lesson6: Bootstrap (Javascript) を使用する

この状態で bootstrap (Javascript) を読み込む: edit src/app.js

+ import 'bootstrap';
import 'bootstrap/dist/css/bootstrap.css';

drop down を足してみて動作する事を確認する: edit www/index.html

+<div class="dropdown">
+  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+    Dropdown
+    <span class="caret"></span>
+  </button>
+  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
+    <li><a href="#">Action</a></li>
+    <li><a href="#">Another action</a></li>
+    <li><a href="#">Something else here</a></li>
+    <li role="separator" class="divider"></li>
+    <li><a href="#">Separated link</a></li>
+  </ul>
+</div>
+     

動作確認

% $(npm bin)/webpack-dev-server