おさらい
Part1 では ES2015 なコードを webpack で使う手順を紹介しました。
Part2 では Bootstrap の CSS を導入する手順を紹介しました。
Part3 では Bootstrap の Javascript を使っている Components を使用する手順を紹介します。
Lesson5: グローバル変数に jQuery を配置する
Bootstrap は グローバル変数に jQuery が存在することを前提としたライブラリなのでまずは jQuery を用意します。
% npm install jquery --save
{ 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