Browserifyを試してみた。

最近vue.jsで遊んでいて、
そのexampleページの最後にBrowserifyというのがあったので、試してみました。
vue.js exampleページ
Project Boilerplate - vue.js

Browserify
Browserify

一言で言うと「jsをマージできるnode.jsのライブラリ」ですかね
とりあえずいつも通り試しにやってみようかなと思いますた。

流れ

1. インストール
2. uniqという別のライブラリで具体例を示す

以上！ｗ

インストール

$ npm install -g browserify

楽勝ですねｗ

uniqライブラリで具体例

インストール

Browserifyの「Hello World With Browserify」
をそのままやると当然ライブラリ入ってないのでエラーになりまする。

main.js

var unique = require('uniq');

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

console.log(unique(data));

実行したコマンド

$node main.js
module.js:340
    throw err;
          ^
Error: Cannot find module 'uniq'
    at Function.Module._resolveFilename (module.js:338:15)
    at Function.Module._load (module.js:280:25)
    at Module.require (module.js:364:17)
    at require (module.js:380:17)
    at Object.<anonymous> (/Users/t_arata/Documents/js_workspace/browserify/main.js:1:76)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Function.Module.runMain (module.js:497:10)
    

なので、とりあえずnpmでインストールしましょう。

$npm install uniq
npm http GET https://registry.npmjs.org/uniq
npm http 200 https://registry.npmjs.org/uniq
npm http GET https://registry.npmjs.org/uniq/-/uniq-1.0.0.tgz
npm http 200 https://registry.npmjs.org/uniq/-/uniq-1.0.0.tgz
uniq@1.0.0 node_modules/uniq
$tree
.
├── main.js
└── node_modules
    └── uniq
        ├── LICENSE
        ├── README.md
        ├── package.json
        ├── test
        │   └── test.js
        └── uniq.js

3 directories, 7 files

そんでもってmain.jsを事項するとエラーは無くなりなんか結果が出力されますね。

$node main.js
[ 1, 2, 3, 4, 5, 6 ]

Browserifyを使ってみる。

わーぱちぱちで終わるとBrowserify全く関係ないのでBrowserifyを使ってみましょうｗ
browserifyするとなにか新しいjsファイルが出来ます。
そしてそいつを実行するとnode_modules関係無く実行できます。

$ browserify main.js -o bundle.js
$ tree
.
├── bundle.js
├── main.js
└── node_modules
    └── uniq
        ├── LICENSE
        ├── README.md
        ├── package.json
        ├── test
        │   └── test.js
        └── uniq.js

3 directories, 7 files
$ node bundle.js
[ 1, 2, 3, 4, 5, 6 ]

これじゃ、本当かよ、node_modulesの中読み込んでるだけやんってなりますね。
node_modules消してやってみましょうー

$ rm -rf node_modules
$ tree
.
├── bundle.js
└── main.js

0 directories, 2 files
$ node bundle.js
[ 1, 2, 3, 4, 5, 6 ]

こんな感じに実行できました。
nodeのライブラリたちをマージして一つのファイルにして遊べるんですね。
とても楽しく使えそうな気がします＼＼\\ ٩( 'ω' )و //／／