如何在浏览器中需要CommonJS模块?

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

CommonJS模块将它们的function放在module.exports命名空间中,通常包含在服务器端脚本中使用require(pathToModule) 。 在客户端加载它们不能以同样的方式工作(需要被replace,需要考虑asynchronous性等)

我发现了模块加载器和其他解决scheme:Browserify,RequireJS,yabble等或简单地更改模块的方法。 你认为最好的方法是什么?为什么?

过去我广泛使用了requirejs (2010年在BBC iPlayer上实现),它运行良好。 它可以处理CommonJS模块,但它需要一个额外的包装,我觉得烦人。 如果你也想在node.js中使用这些模块,那么你也需要在服务器端使用requirejs,因为它不是惯用的node.js JavaScript,所以我不喜欢这样做。

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

Browserify有一个手表function,这工作得很好。 Webmake可以连接到一个监视器(如监视器 ),或者,您可以使用webmake-middleware模块,它可以用作快速或连接应用程序的一部分。 这样做的好处是,不是每次保存时编译JavaScript,只是在实际请求时编译。 Connect使得创build一个服务器(也是静态的)变得微不足道,所以如果你想开发没有后端的前端,你可以创build一个小型的静态node.js服务器来提供你的文件。

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

以下是您在GitHub上按其各自受欢迎程度(观察者数量)排列的当前选项的综合列表:

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

Browserify呢? 其描述是:“浏览器端require()为您的节点模块和npm包”这听起来你所需要的。

CommonJS编译器https://github.com/dsheiko/cjsc为什么? 它可以很好的与nodejs(CommonJs)模块/对待模块一样使用nodejs /和UMD,为编译后的JavaScript带来最less的额外代码,允许导出第三方库的全局variables,而不会触及代码,源地图和其他不能做的技巧:

 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

Webmake是其中一个选项。 我用它来打包超过20个包的200多个模块的应用程序。 有用。

如果你想看到一些例子,请检查: SoundCloud的播放列表pipe理器 ,它是严格的客户端,并与Webmake

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

  • 它的工作方式与CommonJS类似
  • 这很容易使用
  • 它实现了一些即将到来的新标准
  • 您可以在NodeJS中使用它,以便您可以在服务器和客户端使用相同的文件
  • 它包括用于生产的小型化/包装机
  • 它有插件。 Text插件允许您加载HTML文件,对于大型应用程序非常有用。