前回に続き、今回はbowerとも連携する。
Bowerインストール
$ npm install -g bower
Bowerプロジェクト初期化
bower initでデフォルト値を入力する。
$ bower init
? name: hello-bower
? version: 0.0.0
? description:
? main file: index.js
? what types of modules does this package expose?:
? keywords:
? authors: making
? license: MIT
? homepage:
? set currently installed components as dependencies?: Yes
? add commonly ignored files to ignore list?: Yes
? would you like to mark this package as private which prevents it from being accidentally published to the regist? would you like to mark this package as private which prevents it from being accidentally published to the registry?: No
{
name: 'hello-bower',
main: 'index.js',
version: '0.0.0',
authors: [
'making'
],
license: 'MIT',
ignore: [
'**/.*',
'node_modules',
'bower_components',
'test',
'tests'
]
}
? Looks good?: Yes
jQueryインストール
一例としてjQueryをインストールしてみる。
$ bower install --save jquery
debowerify
BowerでinstallしたライブラリをBrowserifyのrequireから読み込めるようにdebowerifyで変換を書ける。
インストール(bowerじゃなくてnpmなので注意)。
$ npm install --save-dev debowerify
Gulpfileに設定する。browserifyにtransformする形。
var browserify = require('browserify');
var gulp = require('gulp');
var source = require('vinyl-source-stream');
var debowerify = require('debowerify');
gulp.task('browserify', function () {
return browserify('./index.js', {debug: true})
.transform(debowerify)
.bundle()
.pipe(source('bundle.js'))
.pipe(gulp.dest('./'));
});
アプリ修正
前回とgreeter.jsはそのままにして、index.jsを以下のように修正する。
var Greeter = require('./greeter.js');
var $ = require('jquery');
var greeter = new Greeter('World');
$(function() {
$('#hello').on('click', function(){
alert(greeter.greet());
});
});
次に、これを呼び出すindex.htmlを作成。
<!DOCTYPE html>
<html>
<head lang="ja">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button id="hello">Click</button>
<script src="bundle.js"></script>
</body>
</html>
ビルド
$ gulp browserify
index.htmlをブラウザで開き、ボタンをクリックすると
できた。
あとで気づいたけど、わざわざBower持ち出さなくても、npmだけでもいけた。
npm install --save-dev jqueryだけで、bower関連不要