Browserifyが動作しません - なぜですか？

Question

次のコードをbundle.jsにブラウズして、フロントエンドに（他の.jsファイルをロードする前に）インクルードします。私はbrowserifyファイルは、単にこの本です：

var firebase = require('firebase') 

私は、フロントエンドに含まれている次のファイルで、この変数に）（認可を呼び出すが、私はfirebaseが定義されていないというエラーを取得しますか？

Answer 1

Browserifyは、ブラウザにCommonJS（ノード）モジュールを使用できるようにするモジュールバンドラです。これは、プロジェクトがCommonJSの表記規則（exports,）と輸入（require）モジュールに従わなければならないことを意味します。

あなたのモジュール（module.js）

var foo = function() { 
    console.log('Foo'); 
}; 

var bar = function() { 
    console.log('Bar'); 
}; 

module.exports = { 
    foo: foo, 
    bar: bar 
}; 

あなたのエントリーポイント（main.js）

var module = require('./module'); 

module.foo(); // Foo 
module.bar(); // Bar 

このコードは以下となります。ここでは基本的な例でありますNodeを使ってすぐに動作しますが、ブラウザはそれを解釈できません。これは、Browserifyが便利な場所です。

エントリポイントでコマンドbrowserify main.js -o bundle.jsを実行すると、Browserifyはすべての依存関係（ここではmodule.js）をトラバースし、バンドルにロードします。このバンドルはブラウザで使用できるので、スクリプトタグにロードすることができます：

<script src="bundle.js"></script>