JavaScript需要()在客户端

是否有可能在客户端使用require() (或类似的东西)?

 var myClass = require('./js/myclass.js'); 

你应该看看这个require.js或head.js。

我一直在使用browserify 。 它还使我可以将Node.js模块集成到我的客户端代码中。

我在这里发表了博客:使用browserify将node.js / CommonJS风格require()添加到客户端JavaScript

我问自己同样的问题。 当我看到它时,我发现压倒性的select。

幸运的是,我发现这个优秀的电子表格可以帮助您根据您的要求select最好的装载机:

https://spreadsheets.google.com/lv?key=tDdcrv9wNQRCNCRCflWxhYQ

如果你想要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; }()); 

注意:这段代码的工作原理是不完整的(尤其是urlparsing),并没有实现所有的Node.js特性(我只是把它放在一起昨晚)。 你不应该在真正的应用程序中使用这个代码 ,但它给你一个起点。 我用这个简单的模块来testing它,它可以工作:

 function hello() { console.log('Hello world!'); } exports.hello = hello; 

看看requirejs项目。

我发现通常build议在编译时对脚本进行预处理,并将它们捆绑到一个(或很less)的包中,并在编译时将require重写为一些“轻量级填充”。

我已经search了“应该能够做到的”新工具“

而且已经提到的浏览器也应该很适合 – http://esa-matti.suuronen.org/blog/2013/04/15/asynchronous-module-loading-with-browserify/

什么是模块系统?

  • 旧堆栈溢出解释 – CommonJS,AMD和RequireJS之间的关系?

  • 详细讨论各种模块框架和他们需要的require() Addy Osmani) – 使用AMD,CommonJS和ES Harmony编写模块化JavaScript

只需使用Browserify,就好像一个编译器,在文件进入生产之前处理文件,并将文件打包成捆。

认为你有一个main.js文件需要你的项目的文件,当你运行browserify,它只是处理所有文件,并创build一个与所有文件捆绑,允许在浏览器中使用require调用同步在没有HTTP请求并且例如对于性能和捆绑的大小而言具有很小的开销。

查看链接了解更多信息: http : //browserify.org/

一些答案已经 – 但我想指出你YUI3和它的按需模块加载。 它同时适用于服务器(node.js)和客户端 – 我有一个演示网站使用在客户端或服务器上运行的完全相同的JS代码来构build页面,但这是另一个话题。

YUI3: http : //developer.yahoo.com/yui/3/

video: 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”,然后执行callback函数。 带有所有YUI3和own-app-module1函数的新沙箱“Y”被创build。 全局名称空间中不显示任何内容。 加载模块(.js文件)由YUI3加载程序处理。 它还使用(可选,不显示)configuration来select要加载的模块的-debug或-min(ified)版本。

您可以创build元素到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 

下面是一个解决scheme,采取了一种非常不同的方法:将所有模块打包成一个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> 

与Node不同,一个包不知道它是外部的名字。 这是由包括依赖项在内的pacakge命名的。 这提供了完整的封装。

给定所有的设置这里是一个函数,从一个包中加载一个文件:

 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 

这个外部上下文提供了一些模块可以访问的variables。

require函数暴露给模块,所以他们可能需要其他模块。

其他属性,如全局对象的引用和一些元数据也被暴露。

最后我们在模块中执行程序并给定上下文。

对于那些希望在浏览器中具有同步node.js风格require语句并且对远程脚本加载解决scheme不感兴趣的人来说,这个回答将非常有用。

我发现组件项目比其他解决scheme(包括require.js)提供了更简化的工作stream程,所以我build议检查https://github.com/component/component 。 我知道这有点晚,但可能对某人有用。

这是一个轻量级的方式来使用您的Web客户端中的require和exports。 这是一个简单的包装器,它创build一个“名称空间”全局variables,并将CommonJS兼容代码包装在一个“define”函数中,如下所示:

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

更多文档在这里:

https://github.com/mckoss/namespace

是的,它很容易使用,但你需要通过脚本标签在浏览器中加载JavaScript文件

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

然后用户在js文件中

 var moduel = require('./module'); 

我使用电子制作应用程序,并按预期工作。