概要
- ブラウザでnpmインストールしたrequireしたライブラリをブラウザからのリクエストの時に使用する
手順
browserify の利用
(1) によると、browserifyを用いることで、依存関係のライブラリを含めて1つのjsファイルにまとめてブラウザから参照できるようになるようなので、試してみる。
browserifyをインストールして実行する。 main.js をソースファイルにして、bundle.jsというファイルにアウトプットしてみる。
% npm install --save-dev browserify % node_modules/.bin/browserify main.js -o bundle.js
完成するとbundle.jsが出力される。 中身を見てみるとmain.jsの内容とライブラリっぽいものが合体しているような感じなのが分かる。
index.html で script src の対象を bundle.js に変更する。
% cat index.html <!DOCTYPE html> <html> <head> <title>Main</title> </head> <body> </body> <script src="bundle.js"></script> </html>
ブラウザからアクセスしてライブラリが利用されて、main.jsに書いたとおりにコンソール出力されるのが分かる。
hoge true
自動でbrowserifyを実行（watchify）
さて、上記のようにbrowserifyを実行すればrequireしたライブラリの利用が出来たわけだが、jsファイルを編集するたびに実行しないといけないので、変更するたびに自動で変換してくれるようにwatchifyというものを仕込むと自動で実行してくれた。
% node_modules/.bin/watchify main.js -o bundle.js -v 541371 bytes written to bundle.js (1.29 seconds) at 0:34:57 541393 bytes written to bundle.js (0.03 seconds) at 0:35:09
参考
(1) require is not definedを解消してrequireを使えるようにする - 文系プログラマー http://uraway.hatenablog.com/entry/2015/11/30/require_is_not_defined%E3%82%92%E8%A7%A3%E6%B6%88%E3%81%97%E3%81%A6require%E3%82%92%E4%BD%BF%E3%81%88%E3%82%8B%E3%82%88%E3%81%86%E3%81%AB%E3%81%99%E3%82%8B
