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

    • Ryuichi Nonaka


    今更感たっぷりではありますが、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
           --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) {
          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) {
          list[ptr++] = a
      list.length = ptr
      return list
    function unique(list, compare, sorted) {
      if(list.length === 0) {
        return list
      if(compare) {
        if(!sorted) {
        return unique_pred(list, compare)
      if(!sorted) {
      return unique_eq(list)
    module.exports = unique
    var unique = require('uniq');
    var data = [1, 2, 2, 3, 4, 5, 5, 5, 6];

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


    次は gulp から 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」エラーの直し方(小ネタ)