JavaScriptのrequire処理とbrowserifyについて

JavaScriptで次のような処理を実行しようと思いました。

var fs = require('fs');

当然エラーとなります。

Uncaught ReferenceError: require is not defined

こんなときはbrowserifyを利用すれば解決します。・・・とここまではなんとなく聞いたことがあったのですが、このbrowserifyの使い方をちゃんとわかっていなかったので、きちんと調べてみました。

こちらのサイトがインストールからGulpをつかったビルドの手順まで記載があってすごく分かりやすかったです。

browserifyのインストールコマンドはこんな感じ。

$ npm i -g browserify

よくわかっていないので今回は手動実行します。

$ cd browserify/
$ browserify main.js -o bundle.js

これでmain.jsを元にbundle.jsが生成されました。

ちなみにmain.jsがこんな感じで・・・

bundle.jsがこんな感じです。

使うときはbundle.jsの方を読み込みます。

<script type="text/javascript" src="javascripts/min/browserify/bundle.js"></script>

これで『require is not defined』エラーが解決しました。

console.log(fs);
fs.writeFile('message.txt', 'Hello Node', function (err) {
  if (err) throw err;
  console.log('It\'s saved!');
});