如何在浏览器中“要求”CommonJS 模块？ [关闭]

Posted 2023-02-22

【中文标题】如何在浏览器中“要求”CommonJS 模块？ [关闭]

【英文标题】：How can I 'require' CommonJS modules in the browser? [closed]

【发布时间】：2011-11-26 10:06:53

【问题描述】：

在浏览器中加载 CommonJS 模块作为客户端 javascript 代码的最佳方式是什么？

CommonJS 模块将它们的功能放在module.exports 命名空间中，并且通常使用require(pathToModule) 包含在服务器端脚本中。在客户端加载它们不能以相同的方式工作（需要替换require，需要考虑异步等）。

我找到了模块加载器和其他解决方案：Browserify、RequireJS、yabble 等，或者简单地改变模块的方法。您认为最好的方法是什么？为什么？

【问题讨论】：

你可以试试github.com/component/component

@JonathanOng 截至 2015 年，组件已弃用。

截至 2018 年，一些答案已经过时，并且没有提及 webpack。 Webpack 将是另一种解决方案。基于阅读不同的解决方案，webpack 越来越被使用/推荐。这是一个值得学习的 PITA，但功能非常强大，并且从 Webpack V4 开始，具有解决转译/打包问题的良好架构。

【参考方案1】：

我不能说我已经尝试过你在这里列出的其他人，但我喜欢RequireJS，因为：

它的工作方式与 CommonJS 类似 简单易用 它实施了一些即将推出的新标准 您可以在 Node.js 中使用它，以便在服务器和客户端中使用相同的文件 它包括一个用于部署到生产环境的压缩器/打包器 它有插件。可让您加载 html 文件的 Text 插件对于大型应用程序非常有用。

【讨论】：

在使用 RequireJS 一段时间后，我打算切换到 Browserify。 RequireJS 仍然很好，但我需要开始在 Node 和浏览器之间真正共享某些模块，并且通过编写适当的 CommonJS 模块更容易做到。

CommonJS 和 requireJS 是两个不同的模块系统。有什么方法可以使它们兼容，或者自动从一种格式转换为另一种格式？

RequireJs 只是一个模块系统，具有特定的模块格式 (AMD)。真正弥合模块系统不兼容性（commonjs/AMD）的唯一工具是github.com/anodynos/urequire。它转换为无处不在的 UMD。 （注：我是它的作者）

这没有回答问题。

你能做的，是编写 commonjs 模块，然后让开发服务器和构建脚本将这些模块包装在 AMD 定义中——这样源代码就是 CJS，但是当在浏览器中请求时，它就像 AMD

【参考方案2】：

使用Browserify。

它的描述是：“你的节点模块和 npm 包的浏览器端 require()”听起来你需要什么。

【讨论】：

还有browservefy，它将按需构建您的捆绑包。它使工作流程更加顺畅。

Browservefy 现在已弃用，并告诉您改用 npmjs.com/package/beefy beefy。

【参考方案3】：

这里是您当前选项的完整列表，按 GitHub 上各自的受欢迎程度（观察者数量）排序：

Options for use of require() in the browser（Wayback Machine存档）​​

【讨论】：

如果您正在管理上述内容，请考虑将urequire.org添加到工具列表中。

找不到页面

不允许仅链接的答案，因为它们可能，嗯……将来会中断（真的吗？？）。请把相关信息在你的回答中。

【参考方案4】：

Webmake 是选项之一。我用它来打包一个由 20 多个包的 200 多个模块构建的应用程序。它有效。

如果您想查看一些示例，请查看：SoundCloud Playlist Manager。它是严格的客户端，使用 Webmake 构建。

【参考方案5】：

我过去曾广泛使用过RequireJS（2010 年在BBC iPlayer 上实现）并且效果很好。它可以处理 CommonJS 模块，但它需要一个额外的包装器，我觉得这很烦人。

如果您也想在 Node.js 中使用这些模块，您还需要在服务器端使用 RequireJS，我不喜欢这样做，因为它不是惯用的 Node.js JavaScript 代码。

在过去的一年里，我在几个项目中使用过webmake 和Browserify。最初，编译步骤让我望而却步，但今年已经广泛使用它，我可以说这不是问题。

Browserify 包含一个监视功能，效果很好。 Webmake 可以连接到观察者（例如watchr），或者您可以使用webmake-middleware 模块，该模块可以用作Express.js 或连接应用程序的一部分。这样做的好处是，它不是在每次保存时都编译 JavaScript，而是仅在您实际请求时才编译。

Connect 让创建服务器（也是静态的）变得微不足道，因此如果您想在没有后端的情况下开发前端，您可以创建一个小型静态 Node.js 服务器来提供文件。

奖励：不需要构建脚本，因为您总是处理构建的代码。

【参考方案6】：

CommonJS compiler。

为什么？它适用于 Node.js (CommonJS) 模块 / 像 Node.js 一样对待模块，并且使用 UMD，为编译的 JavaScript 带来最少的额外代码，允许导出第三方库的全局变量而无需接触它们的代码、源映射和别人做不到的绝招：

var str = require( "lorem-ipsum.txt" );
console.log( str );

输出：

 Lorem ipsum dolor
 sit amet, consectetur
 adipiscing elit. Morbi...

以下是幻灯片：https://speakerdeck.com/dsheiko/modular-javascript-with-commonjs-compiler

【讨论】：

什么是"UMD"？

通用模块定义github.com/umdjs/umd