web-dev-qa-db-ja.com

ブラウザでCommonJSモジュールを要求するにはどうすればよいですか?

CommonJSモジュールをブラウザのクライアント側javascriptとしてロードする最良の方法は何ですか?

CommonJSモジュールは、その機能を_module.exports_名前空間に配置し、通常はサーバー側スクリプトでrequire(pathToModule)を使用して含まれます。それらをクライアントにロードしても同じように機能することはできません(必要性を置き換える必要があり、非同期性を考慮する必要があるなど)。

モジュールローダーやその他のソリューション(Browserify、RequireJS、yabbleなど)、または単にモジュールを変更する方法を見つけました。最良の方法とその理由は何ですか?

58
travelboy

私は過去に requirejs を広範に使用しました(2010年の BBC iPlayer での実装)。 CommonJSモジュールを処理できますが、追加のラッパーが必要です。 node.jsでもこれらのモジュールを使用する場合は、サーバー側でもrequirejsを使用する必要があります。これは、慣用的なnode.js JavaScriptではないため、実行するのは好きではありません。

過去1年間にいくつかのプロジェクトで webmake および browserify を使用しました。当初、コンパイルのステップは私を先送りにしましたが、今年広く使用したので、これは問題ではないと言えます。

Browserifyにはウォッチ機能が含まれており、非常にうまく機能します。 Webmakeは、ウォッチャー( watchr など)に接続できます。または、 webmake-middleware モジュールを使用できます。これは、エクスプレスアプリまたは接続アプリの一部として使用できます。これには、保存ごとにJavaScriptをコンパイルするのではなく、実際にリクエストしたときにのみコンパイルされるという利点があります。 Connect は、サーバー(静的)の作成を簡単にします。したがって、バックエンドなしでフロントエンドを開発する場合は、小さな静的node.jsサーバーを作成してファイルを提供できます。

ボーナス:ビルドされたコードを常に処理するため、ビルドスクリプトは必要ありません。

46
gillesruppert

以下は、GitHubでのそれぞれの人気(ウォッチャーの数)で並べられた現在のオプションの包括的なリストです。

ブラウザでrequire()を使用するためのオプション (Wayback Machineアーカイブ)

18
Bruiser

Browserify についてはどうですか?その説明は、「ノードモジュールとnpmパッケージのブラウザ側require()」であり、必要なものに聞こえます。

12
Kevin McTigue

CommonJSコンパイラ https://github.com/dsheiko/cjsc なぜですか? nodejs(CommonJs)モジュール/ treatモジュールはnodejs /とまったく同じように機能し、UMDを使用すると、コンパイル済みJavaScriptに最小限の追加コードをもたらし、コード、ソースマップ、および他の人ができないトリックに触れることなく、サードパーティライブラリのグローバルをエクスポートできます:

var str = require( "lorem-ipsum.txt" );
console.log( str );

出力:

 Lorem ipsum dolor 
 sit amet, consectetur 
 adipiscing elit. Morbi...

ここでスライド https://speakerdeck.com/dsheiko/modular-javascript-with-commonjs-compiler

2
Dmitry Sheiko

Webmake はオプションの1つです。私はこれを使用して、20を超えるパッケージの200を超えるモジュールからビルドされたアプリケーションをパックします。できます。

いくつかの例をご覧になりたい場合は、以下を確認してください: SoundCloud Playlist Manager

0
Mariusz Nowak