BrowserifyとBowerを組み合わせる

Views EN MD
Bower Browserify Gulp JavaScript

前回に続き、今回は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をブラウザで開き、ボタンをクリックすると

image

できた。

あとで気づいたけど、わざわざBower持ち出さなくても、npmだけでもいけた。

npm install --save-dev jqueryだけで、bower関連不要