2017-01-03 9 views
0
私はindex.htmlファイルからノードモジュールにアクセスするためにBrowserifyを使用してい

をbundle.js含めた後のindex.htmlから参照することはできませんBrowserifyモジュールは、スクリプト

私はモジュールをインポートする(Google App Engineの上にホストされています)私は、Browserifyドキュメントの標準がある見るように「main.js」ファイルには、次のように:

browserify main.js -o bundle.js 

var request = require('request'); 
var fs = require('fs'); 

私は、次のコマンドを使用してbundle.jsファイルにこれを束ねます

これにより、必要なbundle.jsファイルが正常に生成されます。次のように私はその後、私のindex.htmlの中で、ヘッダの先頭にこれを含める:

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

    <script src="/scripts/util/loader.js"></script> 
    <!-- More scripts below here --> 

のindex.htmlの本体内のスクリプトは、行を使用していますloader.js内の関数への呼び出しを行い

request('api.my-url.com/world').pipe(fs.createWriteStream('/resources/myMap.json')); 

レスポンスの内容を含むファイルの作成を試みるために使用します。私がしようとすると、要求を移動する場合は()私が手のindex.html内のスクリプトに呼び出す

loader.js:15 Uncaught ReferenceError: request is not defined 
    at loadWorld (loader.js:15) 
    at Object.create ((index):55) 

:私はGAE、およびアクセスのindex.htmlでこれを展開するときしかし、私は、エラーメッセージで迎えています同じ問題ですが、私がmain.jsに行を移動すると、私はもはやこの問題が発生しません。

私はこれがJavascriptの個人的な誤解につながっていると考えていますが、bundle.jsがスクリプトを介してindex.htmlに含まれた後、要求オブジェクトがindex.htmlで利用できない理由を理解できないようですタグ。

状況に少しでも光を当てることができる誰にも感謝します。

+0

通常、バンドルにはアプリケーション全体が含まれます。あなたは 'requrest'を' index.html'のさらなるスクリプトで使うために束ねていますか?その場合、その答えはかなり簡単です。しかし、あなたの無効な 'fs 'の使用はあなたの質問を理解するのを困難にします - 決してうまくいかないでしょう。あなたがしようとしていることを簡単なステートメントに減らすことはできますか? – cartant

答えて

1

browserifyバンドルを作成すると、アプリケーションの「エントリポイント」になります。しかし、ここではindex.htmlにエントリポイントがあるようですので、スタンドアロンのライブラリをバンドルすることをお勧めします。

Browserifyはオプションではなく、UMDバンドルを生成する、これを行うには--standaloneを呼びかけている:https://github.com/substack/browserify-handbook#standalone

あなたはほぼ同じ方法でそれを呼び出しますが、(グローバル名前空間に)どのような名前を指定UMDバンドルがあるべき与えられた。例えば。

browserify foo.js --standalone mylib > bundle.js

あなたのhtmlで<script src="bundle.js"></script>が含まれている場合さて、この後のスクリプトはmylibオブジェクトを参照することができるようになります。ブラウザで使用することができますrequestような何かをしたい場合は、https://www.npmjs.com/package/xhrは非常に持っている、また、

:ここ

--standaloneオプションを使用した例です類似のAPI。

関連する問題