Middleman 4 の新機能を試す シリーズBrowserify を試してみる

はじめに

今更感たっぷりではありますが、Middleman 4 で sprockets がコア機能から外れるということで外部パイプラインに Gulp を使いながら JavaScript のモジュール化には Browserify を使っていこうと思います。

Browserify とは

Browserifyを使うことでNode.jsのモジュールシステムをブラウザでも利用できるように なります。これによって JavaScript の依存関係を整理できて便利。

Browserify のインストール

今回は公式サイトのサンプル通り、インストールを行います。

$ npm install -g browserify

インストールが完了したら、とりあえずヘルプを表示してみます。

$ browserify -h
Usage: browserify [entry files] {OPTIONS}

Standard Options:

    --outfile, -o  Write the browserify bundle to this file.
                   If unspecified, browserify prints to stdout.

    --require, -r  A module name or file to bundle.require()
                   Optionally use a colon separator to set the target.

      --entry, -e  An entry point of your app

     --ignore, -i  Replace a file with an empty stub. Files can be globs.

    --exclude, -u  Omit a file from the output bundle. Files can be globs.

   --external, -x  Reference a file from another bundle. Files can be globs.

  --transform, -t  Use a transform module on top-level files.

    --command, -c  Use a transform command on top-level files.

  --standalone -s  Generate a UMD bundle for the supplied export name.
                   This bundle works with other module systems and sets the name
                   given as a window global if no module system is found.

       --debug -d  Enable source maps that allow you to debug your files
                   separately.

       --help, -h  Show this message

For advanced options, type `browserify --help advanced`.

Specify a parameter.

サンプルを試す

サンプルを試すには uniq というパッケージが必要です。uniq は配列から重複した要素を削除したりソートを行います。

$ npm install uniq --save-dev
mm4@1.0.0 /Users/rin/Projects/mm4
└── uniq@1.0.1

あとはサンプルの通りに main.js ファイルを作成し browserify のコマンドを実行します。

$ browserify main.js -o bundle.js

Middleman の assets フォルダ内のファイルをコンパイルする場合はこんな感じに。

$ browserify source/assets/javascripts/main.js -o source/assets/javascripts/bundle.js

このコマンドによって、main.js とそれに依存しているモジュールが1つのファイル bundle.js にトランスパイルされます。HTMLファイル内で読み込む JavaScript はこの bundle.js になります。

<script src="bundle.js"></script>

トランスパイルされた JavaScript （bundle.js）

なんとなく bundle.js を眺めてみます。

(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
"use strict"

function unique_pred(list, compare) {
  var ptr = 1
    , len = list.length
    , a=list[0], b=list[0]
  for(var i=1; i<len; ++i) {
    b = a
    a = list[i]
    if(compare(a, b)) {
      if(i === ptr) {
        ptr++
        continue
      }
      list[ptr++] = a
    }
  }
  list.length = ptr
  return list
}

function unique_eq(list) {
  var ptr = 1
    , len = list.length
    , a=list[0], b = list[0]
  for(var i=1; i<len; ++i, b=a) {
    b = a
    a = list[i]
    if(a !== b) {
      if(i === ptr) {
        ptr++
        continue
      }
      list[ptr++] = a
    }
  }
  list.length = ptr
  return list
}

function unique(list, compare, sorted) {
  if(list.length === 0) {
    return list
  }
  if(compare) {
    if(!sorted) {
      list.sort(compare)
    }
    return unique_pred(list, compare)
  }
  if(!sorted) {
    list.sort()
  }
  return unique_eq(list)
}

module.exports = unique

},{}],2:[function(require,module,exports){
var unique = require('uniq');

var data = [1, 2, 2, 3, 4, 5, 5, 5, 6];

console.log(unique(data));

},{"uniq":1}]},{},[2]);

先頭に Browserify のコード、続いて依存関係のある uniq のモジュールがありその後に main.js のコードが書かれているのがわかりますね。

終わりに

トランスパイルまではいけたのでここでおしまい。
次は gulp から Browserify を呼び出せるよう試したいと思います。

参考サイト

• 賢く使うBrowserify - 第1回 Browserifyとは
• npmとbrowserifyを使ったクライアントサイドのウェブアプリ開発

シリーズ

1. Middleman 4 をインストールしてみる
2. Middleman 4 で middleman-blog をインストールしてみる
3. Browserify を試してみる
4. Gulp から Browserify を実行する
5. Watchify を使った Browserify の 変更監視と自動バンドル
6. Gulp から Watchify と Browserify を使う
7. Middleman 4 の External Pipeline（外部パイプライン）を試す
8. Middleman 4 の External Pipeline を活用した Sass のプリコンパイルと Browserify のバンドル
9. Middleman 4 で middleman-syntax を使った Syntax Highlight（小ネタ）
10. gulp-sass で Font Awesome を導入する方法（Bourbon, Neat 対応）
11. Middleman 4 の External Pipeline に対応した Skeleten（テンプレート）「middleman-tail」 を作った
12. Wercker の step-s3sync で起こった 「Parameter problem: Invalid source/destination」エラーの直し方（小ネタ）