, ,

[Babel] Browserify: Node.js で利用できる require をブラウザでも使えるようにする

公開日: 2016/04/13
更新日: 2018/10/16

内股でかめはめ波を打っているおじぃではなかった。

Browsers don’t have the require method defined, but Node.js does. With Browserify you can write code that uses require in the same way that you would use it in Node.

Contents

インストール

browserify をインストールする。

% npm install --save-dev browserify

require したい lodash と jquery をインストールする。

% npm install --save lodash jquery

使い方

JS ファイルから require する。

src/app.es6
var $ = require('jquery');
var _ = require('lodash');
$(function () {
  alert("ok")
});

Browserify で bundle up する。

% $(npm bin)/browserify src/app.es6 -o lib/app.js

未圧縮で 25,771 行の lib/app.js が生成されました。

プラグイン

Browserify とあわせてプラグインを利用することで、bundle up 時に別処理をかますことができる。
licensify を利用して、ライセンスコメントをファイルの先頭に追加する。

インストール。

% npm install --save-dev licensify

オプション付きで bundle up する。

% $(npm bin)/browserify src/app.es6 -p licensify > lib/app.js

package.json あたりから生成してくれるようで、ライセンスコメントが統一書式で確実に残る。

lib/app.js
/**
 * Modules in this bundle
 * @license
 *
 * sandbox-es6:
 *   license: MIT (http://opensource.org/licenses/MIT)
 *   homepage: https://github.com/DriftwoodJP/sandbox-es6#readme
 *   version: 0.1.0
 *
 * jquery:
 *   license: MIT (http://opensource.org/licenses/MIT)
 *   author: jQuery Foundation and other contributors
 *   maintainers: dmethvin <dave.methvin@gmail.com>, scott.gonzalez <scott.gonzalez@gmail.com>, m_gol <m.goleb@gmail.com>, timmywil <timmywillisn@gmail.com>
 *   homepage: http://jquery.com
 *   version: 2.2.3
 *
 * lodash:
 *   license: MIT (http://opensource.org/licenses/MIT)
 *   author: John-David Dalton <john.david.dalton@gmail.com>
 *   maintainers: jdalton <john.david.dalton@gmail.com>, jridgewell <justin+npm@ridgewell.name>, mathias <mathias@qiwi.be>, phated <blaine.bublitz@gmail.com>
 *   contributors: John-David Dalton <john.david.dalton@gmail.com>, Blaine Bublitz <blaine.bublitz@gmail.com>, Mathias Bynens <mathias@qiwi.be>
 *   homepage: https://lodash.com/
 *   version: 4.8.2
 *
 * This header is generated by licensify (https://github.com/twada/licensify)
 */

ありがたい。

補遺