2017-11-28 17 views
0

私は小さなNPMパッケージを開発しています。これは基本的なプロトタイプです:ブラウザーでブラウザーで関数を呼び出せません:Uncaught ReferenceError

function foo() { 
    return 'foo'; 
} 

module.exports = foo; 

このモジュールはブラウザでも使用できます。だから私はbrowserifyをインストールし、次のコマンドを実行しました:

(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){ 
function foo() { 
    return 'foo'; 
} 

module.exports = foo; 
},{}]},{},[1]); 

とサンプルHTMLドキュメント:

<html> 
    <head> 
    <script src="foo_bundle.js"></script> 
    </head> 
    <body> 
    <div id="myElement"></div> 
    <script type="text/javascript"> 
     var element = document.getElementById("myElement"); 
     element.innerHTML = foo(); 
    </script>  
    </body> 
</html> 

を私はに書き込まれた文字列fooを期待していた私に与え

browserify foo.js -o foo_bundle.js 

div要素がブラウザのJavaScriptコンソールに表示されます。

foo.html:9 Uncaught ReferenceError: foo is not defined

私はここで何が欠けていますか?

+0

[この](https://github.com/browserify/browserify# external-requires)はおそらく助けることができます – ztadic91

+0

foo関数はグローバルスコープにありません。 'window.foo = foo;' – user8672473

答えて

1

あなたがブラウザで使用するスタンドアロン版(UMD)としてそのバンドルする必要があります。

browserify foo.js -o foo_bundle.js -s foo 

詳しい使い方here