blocks|key|2985196|text|您应该在require.js或head.js中查找这一点。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2985197|entityMap|0|LINK|mutability|MUTABLE|url|http://requirejs.org/|1|https://github.com/headjs/headjs^0|4|A|0|F|7|1|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]|$A|R|B|S|1|T]]|C|$]]|$1|D|3|-4|5|6|7|U|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]|L|$5|G|H|I|C|$J|M]]]]

You should look into <a href="http://requirejs.org/" rel="nofollow noreferrer">require.js</a> or <a href="https://github.com/headjs/headjs" rel="nofollow noreferrer">head.js</a> for this.

blocks|key|275815|text|我一直在用browserify做这件事。它还允许我将Node.js模块集成到客户端代码中。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|275816|我在这里写了博客：Add+node.js/CommonJS+style+require()+to+client-side+JavaScript+with+browserify|275817|entityMap|0|LINK|mutability|MUTABLE|url|http://browserify.org/|1|http://numbers.brighterplanet.com/2011/08/04/add-node-js-commonjs-style-require-to-client-side-javascript-with-browserify/^0|5|A|0|0|9|26|1|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@$A|Q|B|R|1|S]]|C|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@$A|U|B|V|1|W]]|C|$]]|$1|F|3|-4|5|6|7|X|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]|N|$5|I|J|K|C|$L|O]]]]

I've been using <a href="http://browserify.org/" rel="noreferrer">browserify</a> for that. It also lets me integrate Node.js modules into my client-side code.

I blogged about it here: <a href="http://numbers.brighterplanet.com/2011/08/04/add-node-js-commonjs-style-require-to-client-side-javascript-with-browserify/" rel="noreferrer">Add node.js/CommonJS style require() to client-side JavaScript with browserify</a>

blocks|key|275829|text|如果你想拥有Node.js风格的require，你可以使用如下代码：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|275830|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'+%2B+xhr.responseText+%2B+'\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;
}());|code-block|syntax|javascript|275831|注意:这段代码可以工作，但并不完整(特别是url解析)，并且没有实现所有的Node.js特性(我昨晚才把它放在一起)。你不应该在真实的应用程序中使用这个代码，但是它给了你一个起点。我用这个简单的模块对它进行了测试，它可以工作：|BOLD|275832|function+hello()+{
++++console.log('Hello+world!');
}

exports.hello+=+hello;|275833|entityMap^0|G|7|0|0|1N|J|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|U|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|V|8|@$9|W|A|X|B|M]]|D|@]|E|$]]|$1|N|3|O|5|H|7|Y|8|@]|D|@]|E|$I|J]]|$1|P|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|Q|$]]

If you want to have Node.js style <code>require</code> you can use something like this:

<pre><code>var require = (function () {
 var cache = {};
 function loadScript(url) {
 var xhr = new XMLHttpRequest(),
 fnBody;
 xhr.open('get', url, false);
 xhr.send();
 if (xhr.status === 200 &amp;&amp; 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;
}());
</code></pre>

Beware: this code works but is incomplete (especially url resolving) and does not implement all Node.js features (I just put this together last night).
YOU SHOULD NOT USE THIS CODE in real apps but it gives you a starting point. I tested it with this simple module and it works:

<pre><code>function hello() {
 console.log('Hello world!');
}

exports.hello = hello;
</code></pre>

blocks|key|2985336|text|我问自己同样的问题。当我研究它的时候，我发现选择是压倒性的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2985337|幸运的是，我找到了这个很棒的电子表格，它可以帮助你根据你的需求选择最好的加载器：|2985338|https://spreadsheets.google.com/lv?key=tDdcrv9wNQRCNCRCflWxhYQ|offset|length|2985339|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|1Q|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|Q|8|@]|9|@$F|R|G|S|1|T]]|A|$]]|$1|H|3|-4|5|6|7|U|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|E]]]]

I asked myself the very same questions. When I looked into it I found the choices overwhelming. 

Fortunately I found this excellent spreadsheet that helps you choice the best loader based on your requirements:

<a href="https://spreadsheets.google.com/lv?key=tDdcrv9wNQRCNCRCflWxhYQ">https://spreadsheets.google.com/lv?key=tDdcrv9wNQRCNCRCflWxhYQ</a>

blocks|key|2985205|text|请看一下requirejs项目。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2985206|entityMap|0|LINK|mutability|MUTABLE|url|http://requirejs.org/^0|4|9|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

Take a look at <a href="http://requirejs.org/" rel="noreferrer">requirejs</a> project.

blocks|key|2985500|text|我发现，一般来说，建议在编译时对脚本进行预处理，并将它们捆绑到一个(或很少)包中，同时也在编译时将require重写为一些“轻量级填充程序”。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2985501|我在谷歌上搜索出了以下“新”工具，它们应该能够做到这一点|2985502|2985503|http://mixu.net/gluejs/|unordered-list-item|2985504|https://github.com/jrburke/almond|2985505|https://github.com/component/builder2.js|2985506|2985507|并且已经提到的browserify也应该非常适合--+http://esa-matti.suuronen.org/blog/2013/04/15/asynchronous-module-loading-with-browserify/|2985508|模块系统都是关于什么的？|2985509|2985510|旧的堆栈溢出说明-在Addy+Osmani+-+Writing+Modular+JavaScript+With+AMD,+CommonJS+&+ES+Harmony|2985511|中对各种模块框架及其所需的require()进行了讨论|2985512|entityMap|0|LINK|mutability|MUTABLE|url|1|2|3|http://esa-matti.suuronen.org/blog/2013/04/15/asynchronous-module-loading-with-browserify/|4|http://addyosmani.com/writing-modular-js/^0|1D|7|0|0|0|0|N|0|0|0|X|1|0|0|14|2|0|0|7|A|R|2I|3|0|0|0|A|20|4|0|D|9|0^^$0|@$1|2|3|4|5|6|7|1C|8|@$9|1D|A|1E|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1F|8|@]|D|@]|E|$]]|$1|H|3|-4|5|6|7|1G|8|@]|D|@]|E|$]]|$1|I|3|J|5|K|7|1H|8|@]|D|@$9|1I|A|1J|1|1K]]|E|$]]|$1|L|3|M|5|K|7|1L|8|@]|D|@$9|1M|A|1N|1|1O]]|E|$]]|$1|N|3|O|5|K|7|1P|8|@]|D|@$9|1Q|A|1R|1|1S]]|E|$]]|$1|P|3|-4|5|6|7|1T|8|@]|D|@]|E|$]]|$1|Q|3|R|5|6|7|1U|8|@$9|1V|A|1W|B|C]]|D|@$9|1X|A|1Y|1|1Z]]|E|$]]|$1|S|3|T|5|6|7|20|8|@]|D|@]|E|$]]|$1|U|3|-4|5|6|7|21|8|@]|D|@]|E|$]]|$1|V|3|W|5|K|7|22|8|@]|D|@$9|23|A|24|1|25]]|E|$]]|$1|X|3|Y|5|6|7|26|8|@$9|27|A|28|B|C]]|D|@]|E|$]]|$1|Z|3|-4|5|6|7|29|8|@]|D|@]|E|$]]]|10|$11|$5|12|13|14|E|$15|J]]|16|$5|12|13|14|E|$15|M]]|17|$5|12|13|14|E|$15|O]]|18|$5|12|13|14|E|$15|19]]|1A|$5|12|13|14|E|$15|1B]]]]

I have found that in general it is recommended to preprocess scripts at compile time and bundle them in one (or very few) packages with the <code>require</code> being rewritten to some "lightweight shim" also at compile time.

I've Googled out following "new" tools that should be able to do it

<ul>
<li><a href="http://mixu.net/gluejs/" rel="nofollow noreferrer">http://mixu.net/gluejs/</a></li>
<li><a href="https://github.com/jrburke/almond" rel="nofollow noreferrer">https://github.com/jrburke/almond</a></li>
<li><a href="https://github.com/component/builder2.js" rel="nofollow noreferrer">https://github.com/component/builder2.js</a></li>
</ul>

And the already mentioned <code>browserify</code> should also fit quite well - <a href="http://esa-matti.suuronen.org/blog/2013/04/15/asynchronous-module-loading-with-browserify/" rel="nofollow noreferrer">http://esa-matti.suuronen.org/blog/2013/04/15/asynchronous-module-loading-with-browserify/</a>

<h3>What are the module systems all about?</h3>

<ul>
<li>Older Stack Overflow explanation - <a href="https://stackoverflow.com/questions/16521471/relation-between-commonjs-amd-and-requirejs">Relation between CommonJS, AMD and RequireJS?</a></li>
<li>Detailed discussion of various module frameworks and the <code>require()</code> they need is in <a href="http://addyosmani.com/writing-modular-js/" rel="nofollow noreferrer">Addy Osmani - Writing Modular JavaScript With AMD, CommonJS &amp; ES Harmony</a> </li>
</ul>

blocks|key|275740|text|您可以在DOM中创建元素，以加载项目。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|275741|如下所示：|275742|var+myScript+=+document.createElement('script');+//+Create+new+script+element
myScript.type+=+'text/javascript';+//+Set+appropriate+type
myScript.src+=+'./js/myclass.js';+//+Load+javascript+file|code-block|syntax|javascript|275743|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

You can create elements to the DOM, which loads items.

Like such:

<pre><code>var myScript = document.createElement('script'); // Create new script element
myScript.type = 'text/javascript'; // Set appropriate type
myScript.src = './js/myclass.js'; // Load javascript file
</code></pre>

blocks|key|277830|text|只需使用Browserify，这就像是一个编译器，在文件投入生产之前对其进行处理，并将文件打包成包。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|277831|假设你有一个需要项目文件的main.js文件，当你在其中运行browserify时，它只是简单地处理所有文件并创建一个包含所有文件的包，允许在浏览器中同步使用require调用，而无需HTTP请求，并且对性能和包大小的开销很小。|offset|length|style|CODE|277832|有关更多信息，请参阅链接：http://browserify.org/|277833|entityMap|0|LINK|mutability|MUTABLE|url|http://browserify.org/^0|0|27|7|0|D|M|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@$D|T|E|U|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|V|8|@]|9|@$D|W|E|X|1|Y]]|A|$]]|$1|J|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|Q]]]]

Simply use Browserify, what is something like a compiler that process your files before it go into production and packs the file in bundles.

Think you have a main.js file that require the files of your project, when you run browserify in it, it simply process all and creates a bundle with all your files, allowing the use of the <code>require</code> calls synchronously in the browser without HTTP requests and with very little overhead for the performance and for the size of the bundle, for example.

See the link for more info: <a href="http://browserify.org/" rel="nofollow">http://browserify.org/</a>

blocks|key|281374|text|已经有一些答案了--但我想向您指出YUI3及其按需模块加载。它也可以在服务器(node.js)和客户端运行-我有一个演示网站，使用在客户端或服务器上运行的完全相同的JS代码来构建页面，但这是另一个主题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|281375|YUI3：http://developer.yahoo.com/yui/3/|offset|length|281376|视频：http://developer.yahoo.com/yui/theater/|281377|示例：|281378|(前提条件:已加载7k+yui.js的基本YUI3函数)|281379|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
}|code-block|syntax|javascript|281380|这段代码加载YUI3模块"node“和"io"，以及模块"own-app-module1"，然后运行回调函数。将创建一个包含所有YUI3和own-app-MODEL1函数的新沙箱"Y“。全局命名空间中不显示任何内容。模块(.js文件)的加载由YUI3加载器处理。它还使用(可选的，此处未显示)配置来选择要加载的模块的-debug或-min(实例化)版本。|281381|entityMap|0|LINK|mutability|MUTABLE|url|http://developer.yahoo.com/yui/3/|1|http://developer.yahoo.com/yui/theater/^0|0|5|X|0|0|3|13|1|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|13|8|@]|9|@$D|14|E|15|1|16]]|A|$]]|$1|F|3|G|5|6|7|17|8|@]|9|@$D|18|E|19|1|1A]]|A|$]]|$1|H|3|I|5|6|7|1B|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|1C|8|@]|9|@]|A|$]]|$1|L|3|M|5|N|7|1D|8|@]|9|@]|A|$O|P]]|$1|Q|3|R|5|6|7|1E|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|1F|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]|10|$5|V|W|X|A|$Y|11]]]]

Some answers already - but I would like to point you to YUI3 and its on-demand module loading. It works on both server (node.js) and client, too - I have a demo website using the exact same JS code running on either client or server to build the pages, but that's another topic.

YUI3: <a href="http://developer.yahoo.com/yui/3/" rel="nofollow">http://developer.yahoo.com/yui/3/</a>

Videos: <a href="http://developer.yahoo.com/yui/theater/" rel="nofollow">http://developer.yahoo.com/yui/theater/</a>

Example:

(precondition: the basic YUI3 functions in 7k yui.js have been loaded)

<pre><code>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
}
</code></pre>

This code loads the YUI3 modules "node" and "io", and the module "own-app-module1", and then the callback function is run. A new sandbox "Y" with all the YUI3 and own-app-module1 functions is created. Nothing appears in the global namespace. The loading of the modules (.js files) is handled by the YUI3 loader. It also uses (optional, not show here) configuration to select a -debug or -min(ified) version of the modules to load.

blocks|key|3198761|text|这里的解决方案采用了一种非常不同的方法:将所有模块打包到一个JSON对象中，并通过读取和执行文件内容来请求模块，而无需额外的请求。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3198762|https://github.com/STRd6/require/blob/master/main.coffee.md|offset|length|3198763|JSONSTRd6/require依赖于在运行时是否有可用的包。将为该包生成require函数。该包包含你的应用程序可能需要的所有文件。不再发出http请求，因为包捆绑了所有依赖项。这是客户端所需的最接近Node.js样式的样式。|style|BOLD|CODE|3198764|包的结构如下：|3198765|entryPoint:+"main"
distribution:
++main:+
++++content:+"alert(\"It+worked!\")"
++...
dependencies:
++<name>:+<a+package>|code-block|syntax|javascript|3198766|与Node不同，包不知道它的外部名称。它由包含依赖项的包来命名。这提供了完整的封装。|3198767|考虑到所有这些设置，下面是一个从包中加载文件的函数：|3198768|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|3198769|这个外部上下文提供了一些模块可以访问的变量。|3198770|require函数向模块公开，因此它们可能需要其他模块。|3198771|还公开了其他属性，如对全局对象和某些元数据的引用。|3198772|最后，我们在模块和给定的上下文中执行程序。|3198773|对于那些希望在浏览器中使用同步node.js风格的require语句，并且对远程脚本加载解决方案不感兴趣的人来说，这个答案将是最有帮助的。|3198774|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|1N|0|0|U|2D|12|7|0|0|7|0|0|0|16|0|0|Q|0|0|0|M|0|0|S|0|7|0|0|P|0|0|L|0|0|1X|0^^$0|@$1|2|3|4|5|6|7|1E|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1F|8|@]|9|@$D|1G|E|1H|1|1I]]|A|$]]|$1|F|3|G|5|6|7|1J|8|@$D|1K|E|1L|H|I]|$D|1M|E|1N|H|J]]|9|@]|A|$]]|$1|K|3|L|5|6|7|1O|8|@$D|1P|E|1Q|H|I]]|9|@]|A|$]]|$1|M|3|N|5|O|7|1R|8|@]|9|@]|A|$P|Q]]|$1|R|3|S|5|6|7|1S|8|@$D|1T|E|1U|H|I]]|9|@]|A|$]]|$1|T|3|U|5|6|7|1V|8|@$D|1W|E|1X|H|I]]|9|@]|A|$]]|$1|V|3|W|5|O|7|1Y|8|@]|9|@]|A|$P|Q]]|$1|X|3|Y|5|6|7|1Z|8|@$D|20|E|21|H|I]]|9|@]|A|$]]|$1|Z|3|10|5|6|7|22|8|@$D|23|E|24|H|I]|$D|25|E|26|H|J]]|9|@]|A|$]]|$1|11|3|12|5|6|7|27|8|@$D|28|E|29|H|I]]|9|@]|A|$]]|$1|13|3|14|5|6|7|2A|8|@$D|2B|E|2C|H|I]]|9|@]|A|$]]|$1|15|3|16|5|6|7|2D|8|@$D|2E|E|2F|H|I]]|9|@]|A|$]]|$1|17|3|-4|5|6|7|2G|8|@]|9|@]|A|$]]]|18|$19|$5|1A|1B|1C|A|$1D|C]]]]

Here's a solution that takes a very different approach: package up all the modules into a JSON object and require modules by reading and executing the file content without additional requests.

<a href="https://github.com/STRd6/require/blob/master/main.coffee.md" rel="nofollow">https://github.com/STRd6/require/blob/master/main.coffee.md</a>

STRd6/require depends on having a JSON package available at runtime. The <code>require</code> function is generated for that package. The package contains all the files your app could require. No further http requests are made because the package bundles all dependencies. This is as close as one can get to the Node.js style require on the client.

The structure of the package is as follows:

<pre><code>entryPoint: "main"
distribution:
 main: 
 content: "alert(\"It worked!\")"
 ...
dependencies:
 &lt;name&gt;: &lt;a package&gt;
</code></pre>

Unlike Node a package doesn't know it's external name. It is up to the pacakge including the dependency to name it. This provides complete encapsulation.

Given all that setup here's a function that loads a file from within a package:

<pre><code>loadModule = (pkg, path) -&gt;
 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) -&gt; context[name]

 Function(args..., program).apply(module, values)

 return module
</code></pre>

This external context provides some variable that modules have access to.

A <code>require</code> function is exposed to modules so they may require other modules.

Additional properties such as a reference to the global object and some metadata
are also exposed.

Finally we execute the program within the module and given context.

This answer will be most helpful to those who wish to have a synchronous node.js style require statement in the browser and are not interested in remote script loading solutions.

blocks|key|279581|text|我发现组件项目提供了比其他解决方案(包括require.js)更精简的工作流程，因此我建议您查看https://github.com/component/component。我知道这是一个有点晚的答案，但可能对某些人有用。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|279582|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/component/component^0|1C|12|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

I find the component project giving a much more streamlined workflow than other solutions (including require.js), so I'd advise checking out <a href="https://github.com/component/component" rel="nofollow">https://github.com/component/component</a> . I know this is a bit late answer but may be useful to someone.

blocks|key|281394|text|这是一种轻量级的方式，可以在你的web客户端中使用请求和导出。它是一个创建“名称空间”全局变量的简单包装器，您可以将与CommonJS兼容的代码包装在“定义”函数中，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|281395|namespace.lookup('org.mydomain.mymodule').define(function+(exports,+require)+{
++++var+extern+=+require('org.other.module');
++++exports.foo+=+function+foo()+{+...+};
});|code-block|syntax|javascript|281396|更多文档请点击此处：|281397|https://github.com/mckoss/namespace|offset|length|281398|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|Z|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|U|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|V|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|W|8|@]|9|@$K|X|L|Y|1|Z]]|A|$]]|$1|M|3|-4|5|6|7|10|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|J]]]]

Here's a light weight way to use require and exports in your web client. It's a simple wrapper that creates a "namespace" global variable, and you wrap your CommonJS compatible code in a "define" function like this:

<pre><code>namespace.lookup('org.mydomain.mymodule').define(function (exports, require) {
 var extern = require('org.other.module');
 exports.foo = function foo() { ... };
});
</code></pre>

More docs here:

<a href="https://github.com/mckoss/namespace" rel="nofollow">https://github.com/mckoss/namespace</a>

blocks|key|3198970|text|clientside-require库提供了一个异步load()函数，可用于加载任何JS文件或NPM模块(使用module.exports)、任何.css文件、任何.json、任何.html、任何其他文本文件。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3198971|例如，npm+install+clientside-require+--save|3198972|<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>|code-block|syntax|javascript|3198973|这个项目中一个非常酷的部分是，在任何load()ed脚本中，您都可以像在node.js中一样使用同步require()函数！|3198974|例如，|3198975|load('/path/to/functionality.js')|3198976|在/path/to/functionality.js内部|3198977|var+query_string+=+require("qs")+//+an+npm+module
module.exports+=+function(name){
++++return+qs.stringify({
+++++++++name:name,
+++++++++time:new+Date()
++++}
}|3198978|最后一部分，实现同步require()方法，使它能够利用为在服务器上运行而构建的NPM包。|3198979|3198980|此模块旨在尽可能接近地在浏览器中实现require功能。免责声明:这个模块是我写的。|3198981|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/uladkasach/clientside-require^0|Q|6|1J|E|21|4|2A|5|2I|5|0|I|0|0|3|11|0|0|I|6|1E|9|0|0|0|1|P|0|0|A|9|0|0|I|7|0^^$0|@$1|2|3|4|5|6|7|19|8|@$9|1A|A|1B|B|C]|$9|1C|A|1D|B|C]|$9|1E|A|1F|B|C]|$9|1G|A|1H|B|C]|$9|1I|A|1J|B|C]]|D|@$9|1K|A|1L|1|1M]]|E|$]]|$1|F|3|G|5|6|7|1N|8|@$9|1O|A|1P|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|1Q|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|1R|8|@$9|1S|A|1T|B|C]|$9|1U|A|1V|B|C]]|D|@]|E|$]]|$1|O|3|P|5|6|7|1W|8|@]|D|@]|E|$]]|$1|Q|3|R|5|J|7|1X|8|@]|D|@]|E|$K|L]]|$1|S|3|T|5|6|7|1Y|8|@$9|1Z|A|20|B|C]]|D|@]|E|$]]|$1|U|3|V|5|J|7|21|8|@]|D|@]|E|$K|L]]|$1|W|3|X|5|6|7|22|8|@$9|23|A|24|B|C]]|D|@]|E|$]]|$1|Y|3|-4|5|6|7|25|8|@]|D|@]|E|$]]|$1|Z|3|10|5|6|7|26|8|@$9|27|A|28|B|C]]|D|@]|E|$]]|$1|11|3|-4|5|6|7|29|8|@]|D|@]|E|$]]]|12|$13|$5|14|15|16|E|$17|18]]]]

The <a href="https://github.com/uladkasach/clientside-require" rel="nofollow noreferrer">clientside-require</a> library provides an asynchronous <code>load()</code> function that can be used to load any JS file or NPM module (which uses <code>module.exports</code>), any <code>.css</code> file, any <code>.json</code>, any <code>.html</code>, any any other file as text. 

e.g., 
<code>npm install clientside-require --save</code>

<pre><code>&lt;script src = '/node_modules/clientside-require/dist/bundle.js'&gt;&lt;/script&gt;
&lt;script&gt;
load('color-name') // an npm module
 .then(color_name=&gt;{
 console.log(color_name.blue); // outputs [0, 0, 255]
 })
&lt;/script&gt;
</code></pre>

A really cool part of this project is that inside of any <code>load()</code>ed script, you can use the synchronous <code>require()</code> function the same way you would expect in node.js! 

e.g., 

<pre><code>load('/path/to/functionality.js')
</code></pre>

and inside <code>/path/to/functionality.js</code>:

<pre><code>var query_string = require("qs") // an npm module
module.exports = function(name){
 return qs.stringify({
 name:name,
 time:new Date()
 }
}
</code></pre>

That last part, implementing the synchronous <code>require()</code> method, is what enables it to utilize NPM packages built to run on the server. 

<hr>

This module was designed to implement the <code>require</code> functionality as closely as possible in the browser. Disclaimer: I have written this module.

blocks|key|3198950|text|是的，它非常容易使用，但您需要在浏览器中通过script标签加载javascript文件。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3198951|<script+src="module.js"></script>+|code-block|syntax|javascript|3198952|然后是js文件中的用户，如|3198953|var+moduel+=+require('./module');|3198954|我正在使用电子制作一个应用程序，它的工作如预期。|3198955|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Yes it is very easy to use, but you need to load javascript file in browser by script tag 

<pre><code>&lt;script src="module.js"&gt;&lt;/script&gt; 
</code></pre>

and then user in js file like 

<pre><code>var moduel = require('./module');
</code></pre>

I am making a app using electron and it works as expected.

Is it possible to use <code>require()</code> (or something similar) on client side?

Example

<pre><code>var myClass = require('./js/myclass.js');
</code></pre>

JavaScript require() on client side

服务器

编译器

JSON

可以在客户端使用require() (或类似的东西)吗？示例var myClass = require('./js/myclass.js');

问客户端上的JavaScript require()
EN

回答 14

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问客户端上的JavaScript require()EN

回答 14

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问客户端上的JavaScript require()
EN