BrowserifyとBowerを組み合わせる

BrowserifyとBowerを組み合わせる
Title
BrowserifyとBowerを組み合わせる
Category
Programming::JavaScript::Browserify
Created at
2014-12-28T14:56:12.000+09:00
Created by
making
Updated at
2014-12-28T14:56:12.000+09:00
Updated by
making
Orininal URL
http://blog.ik.am/#/entries/307
前回に続き、今回は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をブラウザで開き、ボタンをクリックすると
できた。

Download Report