客户端上的JavaScript require（）

是否可以在客户端使用

require（）

（或类似的东西）

示例

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

---

您应该对此进行研究。

您可以为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

---

看看这个项目。

已经有了一些答案，但我想让你们看看YUI3及其按需模块加载。它在服务器（node.js）和客户机上都能工作——我有一个演示网站，在客户机或服务器上运行完全相同的js代码来构建页面，但这是另一个主题

YUI3：

视频：

例如：

（前提条件：7k yui.js中的基本YUI3函数已经加载）

---

此代码加载YUI3模块“node”和“io”，以及模块“own-app-module1”，然后运行回调函数。创建了一个包含所有YUI3和own-app-module1函数的新沙盒“Y”。全局命名空间中不显示任何内容。模块（.js文件）的加载由YUI3加载程序处理。它还使用（可选，此处不显示）配置来选择要加载的模块的-debug或-min（ified）版本。

这是一种在web客户端中使用require和exports的轻量级方法。它是一个简单的包装器，可以创建一个“namespace”全局变量，您可以将与CommonJS兼容的代码包装在一个“define”函数中，如下所示：

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

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;
}());

更多文档请点击此处：

我一直在用它。它还允许我将Node.js模块集成到客户端代码中

---

我在这里写了博客：

我问了自己同样的问题。当我调查它时，我发现选择太多了

幸运的是，我发现了这个优秀的电子表格，它可以帮助您根据自己的需求选择最佳的加载程序：

---

如果您想使用Node.js样式

require

，您可以使用如下内容：

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

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;

---

这里有一个采用完全不同方法的解决方案：将所有模块打包到一个JSON对象中，并通过读取和执行文件内容而无需额外请求来要求模块

STRd6/require取决于运行时是否有可用的JSON包。将为该软件包生成

require

函数。该软件包包含应用程序可能需要的所有文件。由于包绑定了所有依赖项，因此不会再发出http请求。这是客户机上所需的Node.js样式

该包的结构如下：

entryPoint: "main"
distribution:
  main: 
    content: "alert(\"It worked!\")"
  ...
dependencies:
  <name>: <a package>

此外部上下文提供了一些模块可以访问的变量

require

功能向模块公开，因此它们可能需要其他模块

其他属性，例如对全局对象的引用和某些元数据 也暴露在外

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

---

对于那些希望在浏览器中使用synchronous node.js样式的require语句并且对远程脚本加载解决方案不感兴趣的人来说，这个答案将非常有用。

只需使用Browserify，它类似于一个编译器，可以在文件投入生产之前对其进行处理并将文件打包

假设您有一个main.js文件需要项目的文件，当您在其中运行browserify时，它只需处理所有文件并创建一个包含所有文件的包，例如，允许在浏览器中同步使用

require

调用，而无需HTTP请求，并且对性能和捆绑包大小的开销非常小

---

有关更多信息，请参见链接：

我发现，通常建议在编译时预处理脚本，并将它们捆绑在一个（或很少）包中，同时在编译时将

require

重写为一些“轻量级垫片”

我用谷歌搜索出了以下“新”工具，它们应该能够做到这一点

而且前面提到的

browserify

也应该非常适合-

模块系统是关于什么的？

• 旧堆栈溢出解释-

• 详细讨论了各种模块框架及其所需的

  require（）

---

我发现组件项目提供了比其他解决方案（包括require.js）更为精简的工作流程，因此我建议退出。我知道这个答案有点晚，但可能对某些人有用。

是的，它很容易使用，但您需要通过脚本标记在浏览器中加载javascript文件

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

我正在使用electron制作一个应用程序，它可以正常工作。

该库提供了一个异步的

load（）

函数，可用于加载任何JS文件或NPM模块（使用

module.exports

），任何

.css

文件，任何

.json

，任何

.html

，任何其他文件作为文本

e、 g。，

npm安装客户端需要--保存

<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>

和内部

/path/to/functionality.js

：

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

最后一部分，实现synchronous

require（）

方法，使它能够利用为在服务器上运行而构建的NPM包

---

---

本模块旨在尽可能在浏览器中实现

require

功能。免责声明：我已经编写了这个模块。

@Debra:为什么不去他们网站上的“用法”部分？如果你想要一个比require.js、head.js或Lab.js更轻量级的解决方案，请看一看。。。。或者，现在您可以将客户端代码与大量工具捆绑在一起，例如在使用requirejs时，请注意警告：。我喜欢这个答案，因为它不是一个简单的答案

load('/path/to/functionality.js')

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