2014 10月30日 11:13
nodejsのモジュールをブラウザで使えるようにするbrowserifyでちょっと遊んだ
Browserifyで少し遊んだ。 npmにあるライブラリをクライアントサイドで使いたいなぁ、という時に便利な子がBrowserifyさんです。 HTML側に複数のscriptタグを書かなくてよくなり、<script src="bundle.js"></script>のみ記述しておけば良いので管理が楽です。 (当然bundle.js以外の名前にすることもできます) requirejsの代わりに使うこともできるし、gulpやらを組み合わせてminifyなどもできるでしょう。 とりあえず試すには QUERY_STRINGをクライアントサイドで処理するのを試した。 ライブラリにはqsを利用。 nodejsをインストール npm install -g browserify npm install qs qsを使うコードをかく browserfyを実行 生成されたjsを使う nodejsのインストールは省略。 browserifyコマンドを利用するためにnpm intsall -g browseriyする。 今回はqsを使うのでnpm install qs をする。 以下のコードはmain.jsに書いた。 var qs = require('qs'); console.log(qs.parse('aaa=bbb&ccc=ddd')); 出力は以下のようになった。 { aaa: 'bbb', ccc: 'ddd' } これをブラウザ上でもうごくようにするためにbrowserifyを使う。 以下のコマンドでbundle.jsを作成する。 $ browserify main.js -o bundle.js qsの中身をbundle.jsの中に加えてrequireを使える状態にもなってるらしいけど確認してない。 index.htmlを作成してブラウザで開くとコンソールで開いてみると同じ出力がでている。 <html> <head> </head> <body> <script src="bundle.js"></script> </body> </html> もうちょっとちゃんとQUERY_STRINGを解析してみる さっきのは固定値だったので、ちゃんとURLから取得する。 location.searchの値を使った。 main.js を以下のようにして、HTML上にも表示した。 var qs = require('qs'); var queryString