require()クライアント側で（または同様のものを）使用することは可能ですか？
例
var myClass = require('./js/myclass.js');
require()クライアント側で（または同様のものを）使用することは可能ですか？
例
var myClass = require('./js/myclass.js');
回答:
これについては、require.jsまたはhead.jsを調べる必要があります。
私はそのためにbrowserifyを使用しています。また、Node.jsモジュールをクライアント側のコードに統合することもできます。
私はここでそれについてブログを書きました：browserifyを使用してクライアント側のJavaScriptにnode.js / CommonJSスタイルrequire（）を追加します
Node.jsスタイルがrequire必要な場合は、次のようなものを使用できます。
var require = (function () {
var cache = {};
function loadScript(url) {
var xhr = new XMLHttpRequest(),
fnBody;
xhr.open('get', url, false);
xhr.send();
if (xhr.status === 200 && xhr.getResponseHeader('Content-Type') === 'application/x-javascript') {
fnBody = 'var exports = {};\n' + xhr.responseText + '\nreturn exports;';
cache[url] = (new Function(fnBody)).call({});
}
}
function resolve(module) {
//TODO resolve urls
return module;
}
function require(module) {
var url = resolve(module);
if (!Object.prototype.hasOwnProperty.call(cache, url)) {
loadScript(url);
}
return cache[url];
}
require.cache = cache;
require.resolve = resolve;
return require;
}());
注意：このコードは機能しますが、不完全であり（特に、URL解決）、すべてのNode.js機能を実装しているわけではありません（昨夜これをまとめました）。 このコードは実際のアプリでは使用しないでくださいが、出発点になります。私はこの単純なモジュールでそれをテストしました、そしてそれは働きます：
function hello() {
console.log('Hello world!');
}
exports.hello = hello;
私は自分自身にまったく同じ質問をしました。それを調べたとき、私は選択肢が圧倒的であることに気づきました。
幸い、要件に基づいて最適なローダーを選択するのに役立つこの優れたスプレッドシートを見つけました。
https://spreadsheets.google.com/lv?key=tDdcrv9wNQRCNCRCflWxhYQ
一般に、コンパイル時にスクリプトを前処理し、それらを1つ（またはごく少数）のパッケージにバンドルして、コンパイル時requireにも「軽量シム」に書き換えることをお勧めします。
私はそれを行うことができるはずの「新しい」ツールをグーグルで検索しました
そして、すでに述べたものbrowserifyも非常にうまく適合するはずです--http：//esa-matti.suuronen.org/blog/2013/04/15/asynchronous-module-loading-with-browserify/
古いスタックオーバーフローの説明-CommonJS、AMD、RequireJSの関係？
さまざまなモジュールフレームワークとrequire()それらに必要なものの詳細な説明は、Addy Osmani-AMD、CommonJS、およびESHarmonyを使用したモジュラーJavaScriptの記述にあります。
アイテムをロードするDOMに要素を作成できます。
そのようなように：
var myScript = document.createElement('script'); // Create new script element
myScript.type = 'text/javascript'; // Set appropriate type
myScript.src = './js/myclass.js'; // Load javascript file
Browserifyを使用するだけです。これは、本番環境に入る前にファイルを処理し、ファイルをバンドルにパックするコンパイラのようなものです。
プロジェクトのファイルを必要とするmain.jsファイルがあると考えてください。その中でbrowserifyを実行すると、すべてが処理され、すべてのファイルとのバンドルが作成されます。これにより、requireHTTPリクエストなしでブラウザーで呼び出しを同期的に使用できます。たとえば、パフォーマンスやバンドルのサイズのオーバーヘッドはほとんどありません。
詳細については、リンクを参照してください：http：//browserify.org/
すでにいくつかの答えがありますが、YUI3とそのオンデマンドモジュールのロードについて説明したいと思います。サーバー（node.js）とクライアントの両方で機能します-クライアントまたはサーバーのいずれかで実行されているまったく同じJSコードを使用してページを構築するデモWebサイトがありますが、それは別のトピックです。
YUI3：http：//developer.yahoo.com/yui/3/
ビデオ：http：//developer.yahoo.com/yui/theater/
例：
（前提条件：7k yui.jsの基本的なYUI3関数がロードされている）
YUI({
//configuration for the loader
}).use('node','io','own-app-module1', function (Y) {
//sandboxed application code
//...
//If you already have a "Y" instance you can use that instead
//of creating a new (sandbox) Y:
// Y.use('moduleX','moduleY', function (Y) {
// });
//difference to YUI().use(): uses the existing "Y"-sandbox
}
このコードは、YUI3モジュール「node」と「io」、およびモジュール「own-app-module1」をロードしてから、コールバック関数を実行します。すべてのYUI3およびown-app-module1関数を含む新しいサンドボックス「Y」が作成されます。グローバル名前空間には何も表示されません。モジュール（.jsファイル）のロードは、YUI3ローダーによって処理されます。また、（オプション、ここには表示されていません）構成を使用して、ロードするモジュールの-debugまたは-min（ified）バージョンを選択します。
非常に異なるアプローチをとるソリューションは次のとおりです。すべてのモジュールをJSONオブジェクトにパッケージ化し、追加のリクエストなしでファイルの内容を読み取って実行することでモジュールを要求します。
https://github.com/STRd6/require/blob/master/main.coffee.md
STRd6 / requireは、実行時にJSONパッケージを使用できるかどうかに依存します。require関数は、そのパッケージのために生成されます。パッケージには、アプリが必要とする可能性のあるすべてのファイルが含まれています。パッケージにはすべての依存関係がバンドルされているため、これ以上httpリクエストは行われません。これは、クライアントで必要なNode.jsスタイルにできるだけ近いものです。
パッケージの構造は次のとおりです。
entryPoint: "main"
distribution:
main:
content: "alert(\"It worked!\")"
...
dependencies:
<name>: <a package>
ノードとは異なり、パッケージは外部名を認識しません。名前を付けるのは、依存関係を含むパッケージ次第です。これにより、完全なカプセル化が提供されます。
そのすべての設定を前提として、パッケージ内からファイルをロードする関数を次に示します。
loadModule = (pkg, path) ->
unless (file = pkg.distribution[path])
throw "Could not find file at #{path} in #{pkg.name}"
program = file.content
dirname = path.split(fileSeparator)[0...-1].join(fileSeparator)
module =
path: dirname
exports: {}
context =
require: generateRequireFn(pkg, module)
global: global
module: module
exports: module.exports
PACKAGE: pkg
__filename: path
__dirname: dirname
args = Object.keys(context)
values = args.map (name) -> context[name]
Function(args..., program).apply(module, values)
return module
この外部コンテキストは、モジュールがアクセスできるいくつかの変数を提供します。
A require彼らは他のモジュールが必要な場合がありますので、機能をモジュールにさらされています。
グローバルオブジェクトへの参照や一部のメタデータなどの追加のプロパティも公開されます。
最後に、モジュール内でプログラムを実行し、コンテキストを指定します。
この回答は、ブラウザで同期node.jsスタイルのrequireステートメントを使用したい場合や、リモートスクリプトロードソリューションに関心がない場合に最も役立ちます。
コンポーネントプロジェクトが他のソリューション（require.jsを含む）よりもはるかに合理化されたワークフローを提供していることがわかったので、https：//github.com/component/componentをチェックすることをお勧めします。私はこれが少し遅い答えであることを知っていますが、誰かに役立つかもしれません。
これは、Webクライアントでrequireとexportsを使用する軽量の方法です。これは「名前空間」グローバル変数を作成する単純なラッパーであり、CommonJS互換コードを次のような「define」関数でラップします。
namespace.lookup('org.mydomain.mymodule').define(function (exports, require) {
var extern = require('org.other.module');
exports.foo = function foo() { ... };
});
ここに他のドキュメント：
クライアント側-必要ライブラリを非同期提供するload()任意のJSファイルまたはNPMモジュール（用途をロードするために使用することができる機能module.exports）、任意の.cssファイル、任意の.jsonいずれかを、.html、テキストのような任意の他のファイルを。
例えば、
npm install clientside-require --save
<script src = '/node_modules/clientside-require/dist/bundle.js'></script>
<script>
load('color-name') // an npm module
.then(color_name=>{
console.log(color_name.blue); // outputs [0, 0, 255]
})
</script>
このプロジェクトの本当にすばらしい部分は、edスクリプト内で、node.jsで期待するのと同じ方法でload()同期require()関数を使用できることです。
例えば、
load('/path/to/functionality.js')
と内部/path/to/functionality.js：
var query_string = require("qs") // an npm module
module.exports = function(name){
return qs.stringify({
name:name,
time:new Date()
}
}
最後の部分である同期require()メソッドの実装により、サーバー上で実行するように構築されたNPMパッケージを利用できるようになります。
このモジュールはrequire、ブラウザに可能な限り密接に機能を実装するように設計されています。免責事項：私はこのモジュールを作成しました。