Javascript 库使用 require() 但我没有或没有使用 nodeJS？

Question

我遇到了几个使用此 require() 函数的 JavaScript 项目和库，以便包含其他文件，如下所示：

require('somefile')

我从来没有听说过，显然它是 node.js 的东西，我没有也没有使用它。

我只是打算在我自己的网站中使用这些 JavaScript 库，但我看到了各种涉及“npm”（无论是什么）的指令。然后据说有一个名为 required.js 的替代品，但这似乎使用了不同的语法，比如强制使用 require([...]) 或其他东西，而我需要包含的项目只是 do require(... ）。

在常规 html5 网站中使用 JavaScript 项目时，处理这种 require(...) 内容的最简单方法是什么？ （即所有都应该运行客户端）

---

补充：我已经尝试过 require.js，但它似乎不起作用。例如 somelibrary.js 中的第一行是这样的：

var assert = require('assert')

当我之前包含 require.js，然后是 somelibrary.js 时，我收到了这个错误：

未捕获的异常：错误：模块名称“assert”尚未加载 然而对于上下文：_。使用 require([])

任何包含 require() 的东西都会发生这种情况

---

另一个补充：我注意到人们提到“浏览器”。我试图包含的一些 js 项目也推荐这个。显然，这应该生成一个我可以包含的即用型 .js 文件。但是

1. 他们为什么不直接发布这个经过浏览器化的 .js？我有理由自己编译吗？它应该是所有浏览器或网站通用的东西，对吧？

2. 这个browserify的东西，显然是为了避免node.js，实际上似乎需要node.js本身（说明都提到“npm -g install browserify”等）

Answer 1

理想情况下，库应该支持以下内容，具体取决于其环境。假设您正在使用一个名为“MyLib.js”的库。

未检测到模块加载器

window.MyLib

检测到Requirejs

define(['MyLib'], function (MyLib) {
  // Do something
  return {};
});

检测到 CommonJS，例如节点或使用 browserify 或 bower

var MyLib = require('MyLib');

并非所有的库都符合这一点，但它们应该。也许您正在查看的 lib 仅支持 Node.js。查看 jQuery 的源代码，您会看到如下内容：

if ( typeof module === "object" && typeof module.exports === "object" ) {
    // For CommonJS and CommonJS-like environments where a proper window is present,
    // execute the factory and get jQuery
    // For environments that do not inherently posses a window with a document
    // (such as Node.js), expose a jQuery-making factory as module.exports
    // This accentuates the need for the creation of a real window
    // e.g. var jQuery = require("jquery")(window);
    // See ticket #14549 for more info
    module.exports = global.document ?
        factory( global, true ) :
        function( w ) {
            if ( !w.document ) {
                throw new Error( "jQuery requires a window with a document" );
            }
            return factory( w );
        };
} else {
    factory( global );
}

Answer 2

Node.js 现在被大量用于管理 JavaScript 项目，即使项目是客户端。例如，Grunt、Bower、Browserify、Gulp 和许多其他构建工具在 Node.js 上运行，即使您可以在客户端项目中使用它们。使用这些工具不会使您的项目在生产中依赖 Node。 Node 仅用于开发。要安装这些工具，需要使用 npm，它是一个包管理器。与 Maven 或 Ivy 一样，npm 将通过从 Internet 下载软件包及其依赖项来安装它们。

安装指令涉及 npm 的库本来是在 Node 中使用的，但可以在使用 Browserify 转换后在浏览器中使用。使用 npm 下载库，然后使用 Browserify 将其转换为浏览器样式（使用 npm 安装，因为它本身运行在 Node 上）。您应该得到一个可以导入到客户端项目中的 JavaScript 文件。

专门针对浏览器的库通常将 Bower 称为安装方法，而不是 npm。 Bower 也是一个包管理器，但它旨在下载和安装为浏览器编写的库，而不是 Node.js。如果您想要的库在 Bower 上可用，您可以使用 bower install <lib> 下载它及其所有依赖项。 Bower 会将所有文件放在当前目录的bower_components 文件夹中。然后，您可以将这些文件复制到您的项目中，或者让您的项目直接从该文件夹中导入它们。

Answer 3

因此，browserify 只是一个工具，它可以在浏览器中使用节点样式的模块。是的，您确实需要安装 node.js 才能使用 npm 和 browserify。但是这些时候，您的大部分前端工具集都需要 node.js。

npm 充满了用 JavaScript 编写并在浏览器中运行的模块。使用 browserify，您可以在浏览器中使用这些模块。

它通过填充整个require 机制并使其在浏览器中工作来工作。这也意味着您可以在模块中组织代码：

// add.js
module.exports = function(x, y) {
    return x + y;
}

// app.js
var add = require('./add.js');
var result = add(7, 8);

现在您可以通过运行 browserify app.js -o bundle.js 来生成您的包（您需要包含在 html 中的唯一脚本）。

如果您不喜欢 browserify 方法，您也可以使用 --standalone option 生成 UMD 格式的 JavaScript 文件。然后，您可以简单地将其包含在您的 html 中，并将其与 window.add 一起用于前面的示例。

Answer 4

require 语句由require.js 处理，可以在javascript 环境中独立使用。它是一个模块加载器，可优化浏览器中的加载依赖项。它有一个 Node.js 实现，但这并不意味着你必须使用 Node，你可以在你的项目中包含 require。

（ps：npm 是 Node Package Manager，除非您使用 Node，否则您的项目不需要它。它简化了将 javascript 节点模块包含到您的项目中。）