5

Is anyone familiar with Yabble or other browser-side CommonJS loaders?

I'm experimenting with Node.js and would very much like to create Javascript modules which can be used interchangeably on the server side and the client side. This may end up being more a "because it's awesome" kind of thing more so than "because it's practical and useful" kind of thing.

As such, I'm basically trying to get the CommonJS require() method to work on the browser-side, which is exactly what Yabble is supposed to do. I don't really know where to start with it though. I can't seem to find any documentation other than what's found in Yabble's Github readme, and that's not helping much.

Essentially all I've done is put this in an HTML page...

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

<!-- Uses require -->
<script>
    require.setModuleRoot('http://localhost:8030/')
    my_module = require('my_module')
</script>

But anytime I call the require() function all I get a Synchronous require() is not supported. exception thrown.

Can someone help me get started? Where am I supposed to load yabble.js where am I supposed to call require? Is there a special way to run my Javascript modules?

4

2 に答える 2

6

関数を使用する必要がある Javascript コードをrequire()ブラウザにロードする場合、そのコードへのエントリ ポイントはrequire.run()関数でなければなりません。

例: 良い:

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

<script>
    require.setModuleRoot('http://localhost:8030/')
    require.run('my_module') // <-- Uses require() function somewhere
</script>

例: Bad (Synchronous require() is not supportedエラーが発生します):

<script src="yabble.js"></script>
<script src="http://localhost:8030/my_module.js"></script> <!-- <== Use's require function somewhere -->

参考までに、Yabble がこれを行う方法はかなり気の利いたものです。実際にはJavascriptソースコードを静的に分析します。基本的には正規表現を使用してメソッドを探し、サーバーからrequire()そのスクリプトをプルしようとすると、そのスクリプトの同じ静的分析を繰り返します。 ..js.js

.jsこれは、制御ロジックがプログラム フローが関数に決して到達しないことを意味する場合でも、実際にはこれらのスクリプトをロードするため、特に混乱を招く可能性がありrequire()ます。たとえば、もしあなたが...

if (False) { require('some_module'); }

... Yabble は引き続きこのモジュールをロードします。

于 2011-03-12T21:29:26.977 に答える
2

ブラウザでのモジュールの同期ロードには問題があります。次のような構成:

var x = require('something_remote.js')

ブラウザーがコードを停止 (ブロック) し、リモート ファイルを取得して解析し、エクスポートを返すことを意味します。しかし、これはシングル スレッドのブラウザ環境には当てはまりません。ネットワークのパフォーマンスに関して、メインの JavaScript スレッド (したがって、ユーザーのページのインタラクティブ性) を停止することになります。そのため、ブラウザーはこのシナリオに対して進化し、独自のスケジュールで非同期読み込みを優先するようになりました。ここにいくつかの良い議論があります：

http://www.sitepen.com/blog/2010/07/16/asynchronous-commonjs-modules-for-the-browser-and-introducing-transporter/

ここで機能する可能性のあるパターンの 1 つは、require() 実装が同期的にブロックし、XHR を介してファイルを取得してから評価することですが、これは、非同期ファイルベースの読み込みのすべてのブラウザー サポート/インフラストラクチャに対して実行されるようです。また、それがブラウザ セキュリティのクロスドメイン プリミティブにどのような影響を与えるかにも興味があります。

したがって、ブラウザーの非同期読み込みモデルに適合させるには、次のようなコールバック メカニズムを使用する必要があります。

require("something.js", function () { // called later, after something.js has loaded! })

RequireJS がこれを行っているようです:

http://requirejs.org/docs/start.html

おそらくそれを試してみませんか？

NodeJS などの JavaScript 環境 (外部ネットワーク ホストの代わりにディスクから「ローカル」モジュールをロードするように構築されている) は、同期ロードを実行できます。

JSの専門家からの修正をいただければ幸いです:-)

于 2011-03-09T20:58:06.820 に答える