如何在浏览器中“要求”CommonJS module?

IT技术 javascript node.js commonjs
2021-03-13 12:20:40

在浏览器中将 CommonJS module加载为客户端 JavaScript 代码的最佳方法是什么?

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

我找到了module加载器和其他解决方案:Browserify、RequireJS、yabble 等,或者简单地更改module的方法。你认为最好的方法是什么,为什么?

6个回答

我过去曾广泛使用RequireJS2010 年BBC iPlayer上实现)并且它运行良好。它可以处理 CommonJS module,但它需要一个额外的包装器,我觉得这很烦人。

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

在过去的一年里,我在一些项目中使用了webmakeBrowserify最初,编译步骤让我失望,但今年广泛使用它,我可以说这不是问题。

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

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

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

以下是您当前选项的完整列表,按其在 GitHub 上的受欢迎程度(观察者数量)排序:

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

如果您正在管理上述内容,请考虑将urequire.org添加到工具列表中。
2021-04-17 12:20:40
找不到页面
2021-05-15 12:20:40
只允许链接的答案是不允许的,因为它们可能会,呃......在未来中断(真的??)。在您的回答中填写相关信息
2021-05-16 12:20:40

使用Browserify

它的描述是:“您的节点module和 npm 包的浏览器端 require()”,这听起来是您所需要的。

还有browservefy可以按需构建您的包。它使工作流程更加顺畅。
2021-04-16 12:20:40
Browservefy 现在已被弃用,并告诉您使用npmjs.com/package/beefy beefy代替。
2021-05-07 12:20:40

CommonJS的编译器

为什么?它适用于 Node.js (CommonJS) module /treat module与 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”
2021-05-05 12:20:40
通用module定义github.com/umdjs/umd
2021-05-14 12:20:40

Webmake是其中一种选择。我用它来打包一个应用程序,该应用程序由 20 多个包的 200 多个module构建而成。有用。

如果您想查看一些示例,请查看:SoundCloud 播放列表管理器它是严格的客户端并使用 Webmake 构建。