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

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

[markdown]
> * [Browserify](http://browserify.org/)
>
> 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.

## インストール

browserify をインストールする。

“`prettyprinted
% npm install –save-dev browserify
“`

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

“`prettyprinted
% npm install –save lodash jquery
“`

## 使い方

JS ファイルから require する。

“`javascript:src/app.es6
var $ = require(‘jquery’);
var _ = require(‘lodash’);
$(function () {
alert(“ok”)
});
“`

Browserify で bundle up する。

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

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

> * [npmとBrowserifyでjQueryを管理する – to-R](http://blog.webcreativepark.net/2015/12/24-221725.html)

## プラグイン

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

> * [JSをbrowserifyでビルドし、ライセンスコメントを適切に残す – $shibayu36->blog;](http://blog.shibayu36.org/entry/2016/01/06/102000)

インストール。

> * [twada/licensify: Browserify plugin to prepend license header to your bundle](https://github.com/twada/licensify)

“`prettyprinted
% npm install –save-dev licensify
“`

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

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

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

“`javascript: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 , scott.gonzalez , m_gol , timmywil
* homepage: http://jquery.com
* version: 2.2.3
*
* lodash:
* license: MIT (http://opensource.org/licenses/MIT)
* author: John-David Dalton
* maintainers: jdalton , jridgewell , mathias , phated
* contributors: John-David Dalton , Blaine Bublitz , Mathias Bynens
* homepage: https://lodash.com/
* version: 4.8.2
*
* This header is generated by licensify (https://github.com/twada/licensify)
*/
“`

ありがたい。

## 補遺

> * [npmとbrowserifyを使ったクライアントサイドのウェブアプリ開発 | Web Scratch](http://efcl.info/2014/0120/res3605/)
> * [substack/browserify-handbook: how to build modular applications with browserify](https://github.com/substack/browserify-handbook)
[/markdown]