Browserify + GulpでクライアントのJavaScript / CoffeeScriptでrequire

スポンサーリンク

先日以下の記事で、クライアントサイド JavaScript での require による依存解決の方法を読みました。一言で言うと Browserify というライブラリを使って、クライアント側 JavaScript でも、モジュールをファイルごとに分割して require で読み込むための手順。

Browserifyでrequireを使ってjavascriptの依存関係をすっきりにしてみる – ぼくのかんがえたさいきょうのうぇぶさーびす

これを真似したくて、昨日日曜日に試したのでその記録です。

【お知らせ】 英単語を画像イメージで楽に暗記できる辞書サイトを作りました。英語学習中の方は、ぜひご利用ください!
画像付き英語辞書 Imagict | 英単語をイメージで暗記
【開発記録】
英単語を画像イメージで暗記できる英語辞書サービスを作って公開しました
スポンサーリンク

ぼくうぇぶさんのページでは、JavaScript のビルドツール(タスクランナー)として Grunt を使ってありますが、個人の好みにより私は Gulp を使用します。Grunt も Gulp も JavaScript/CSS などフロントエンド用のビルドツールで、C言語の Make、Ruby の Rake に相当するようなツールです。

browserify の公式ページ&ドキュメント。
Screen Shot 2015-03-23 at 11.00.27
Browserify
https://github.com/substack/node-browserify

gulp の公式ページ&ドキュメント。
Screen Shot 2015-03-23 at 11.01.14
gulp.js – the streaming build system
https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md

— 環境 —
Mac OS X
node v0.10.28
npm 2.4.1
gulp CLI version 3.8.11
browserify 9.0.3

では以降、作業記録です。

Gulp と Browserify をインストール

node.js が入ってなかったら最初に入れておきます。私の環境では、Mac 上 Homebrew でインストール。

デフォルトでは brew install node.js で、npm もインストールされます。

続いて、npm で gulp と browserify を入れる。-g オプションでグローバルにインストール。

必要な npm パッケージを作業ディレクトリにインストール

次に、作業用のディレクトリ作成して、必要となる npm パッケージをインストールしていきます。

dest はビルドした JavaScript ファイルを配置するディレクトリ、lib は後ほど作成する CoffeeScript のモジュールを配置するディレクトリです。

続いて必要な npm パッケージのインストール。どうやら gulp, browserify などは、作業ディレクトリにもインストールする必要がある模様。その他、CoffeeScript を使えるようにするモジュールを入れます。

-g オプションを付けないと、作業中ディレクトリに node_modules というディレクトリが作成されて、そこに npm ライブラリが入る。

coffee-script: gulp のタスクを CoffeeScript で書けるようにする。
coffeeify: CoffeeScript で書いたファイルを Browserify でビルドできるようにする。
vinyl-source-stream: 謎。よく分からんけどなんか必要らしい。

また、調査中に npm install コマンドで –save-dev オプションを付ける書き方を何度も見たのですが、これは…

と npm init して –save-dev オプションを付けてインストールすると、npm init で生成される package.json に、インストールしたライブラリの情報を書き込んでくれるそうです。node.js ライブラリとして公開する場合は、package.json が必要とのことですが、今回は本題から外れるのでスキップ。

npmでnode.jsのpackageを管理する – Qiita
npmの使い方の勉強メモ1(node.js=v0.11.16, npm=2.3.0) – msakamoto-sfのはてなブログ

動作テスト用のファイルを作成

続いて、CoffeeScript ファイルを作成していきます。四角形、三角形、円の面積を求めるモジュールとそれを使う main.coffee を作りました。以下のようなディレクトリ構成になり、モジュール用のファイルは lib ディレクトリ以下に配置します。

lib/shape.coffee

lib/rectangle.coffee

lib/triangle.coffee

lib/circle.coffee

main.coffee

Browserify を使うと、以上のように require でモジュールの他ファイルを読み込むように書けます。すごい。require で指定するファイル名で拡張子(.coffee)を省略していますが、これは後述する gulpfile.coffee で省略するように設定することで利用できる。

gulpfile.coffee を作成して Gulp でビルド

以下の gulpfile.coffee を作成。

gulpfile.coffee

続いて gulp でビルド実行。

gulpfile.coffee で default のタスクを書いておくと、コマンドラインでタスクの指定を省略して gulp のみでビルド実行した時に、default に書いたタスクが実行される。

これで CoffeeScript から素の JavaScript にコンパイルされたファイルが、dest/main.js に生成されました。

テスト用の HTML ファイルを作成

コンパイルされた dest/main.js を読み込んで、ブラウザで実行する HTML ファイルを作成します。

main.html

この HTML ファイルをブラウザで実行すると、以下の順で alert が表示されます。

15
7.5
28.274333882308138

以上で完成です!長かった、お疲れ様でした。今回作成したテスト用プロジェクトは、GitHub に上げていますのでご自由にご参考ください。

https://github.com/takafumir/browserify-gulp-test

さらなる課題や類似ツールについて

実践で使う上でのさらなる課題としては、source maps やファイルの変更監視などがある。この辺りについては以下に譲ります。

JavaScript – gulpとBrowserifyでJSをビルドしてみた – Qiita
SassのデバッグにSource Mapsを使うべきたくさんの理由 | Dress Cording

また Browserify と同じように JavaScript での依存を解決するツールとして、webpack というものもあるそうです。browserify と webpack の比較は以下。

uu59のメモ | browserifyとwebpack

今回の記事内容、Gulp + Browserify による require 実現については以下のページ等も参考にしました。とても助かりました、ありがとうございます。以上ですが、つっこみもお待ちしております。

スポンサーリンク
オライリーのJavaScritp本(通称サイ本)は、昔かなり読み込みました。
 
スポンサーリンク

Leave Your Message!