76

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

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

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

4

6 回答 6

50

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

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

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

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

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

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

于 2012-09-29T15:53:05.027 回答
21

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

在浏览器中使用 require() 的选项（Wayback Machine存档）

于 2012-03-06T11:39:41.923 回答
13

使用浏览器化。

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

于 2011-09-28T03:09:33.110 回答
2

CommonJS 编译器。

为什么？它适用于 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

于 2015-01-27T16:23:01.867 回答
0

Webmake是其中一种选择。我用它来打包一个由 20 多个包的 200 多个模块构建的应用程序。有用。

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

于 2012-07-26T19:06:52.620 回答
-2

我不能说我已经尝试过您在此处列出的其他方法，但我喜欢RequireJS，因为：

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