tyoshikawa1106のブログ

- Force.com Developer Blog -

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が生成されました。
f:id:tyoshikawa1106:20160416210244p:plain


ちなみにmain.jsがこんな感じで・・・
f:id:tyoshikawa1106:20160416210457p:plain


bundle.jsがこんな感じです。
f:id:tyoshikawa1106:20160416210539p:plain


使うときは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!');
});

そしたらnot functionのエラーが・・
f:id:tyoshikawa1106:20160416213142p:plain


なんかfs変数に値が正しくセットされていない感じ。検索してみると参考になる情報がありました。


Qiitaの記事のおかげで原因はなんとなくわかったのですが、対応しないといけないことが多くてちょっとむずかしいそう。。この辺はもう少し勉強してあらためて試してみようと思います。