如何使用Browserify模块化Chrome应用程序？

Question

我观看了以下Google Apps Office视频,并了解了如何使用browserify将JS封装到一个文件中,使用节点CommonJS打包系统.我喜欢这个想法,因为它还添加了许多移植到浏览器的节点库,它可以处理CoffeeScript.

视频没有涉及的一件事是如何制作一个有多个视图的Chrome应用程序仍然以干燥的方式使用browserify .让我解释.通常,您的browserify命令会获取一系列JS文件(设计为模块),并将其连接到一个带有一些包装糖的JS文件中.您很高兴从您的内容页面,背景页面或弹出页面引用该JS文件.但是,如果您的应用程序同时具有后台页面和弹出页面,那么您是否会在每个页面中包含相同的已编译JS文件？这会不会导致chrome加载脚本两次(在两个实例中)？如果是这样,似乎很多浪费只是为了得到你想要的零件而解释一切.或者require()/ exports模式是否可以防止对特定上下文可能不需要的模块进行不必要的解释？

如果这不是最佳实践,那么如何以一种方式打包模块,使每个页面以干燥的方式获得所需的模块,而不必重复自己或每页都有单独的浏览器捆绑包？其他人如何接触这个话题？

Answer 1

我发现一种效果很好的技术是为每个上下文创建一个单独的包(例如背景,内容等).这是一个示例目录结构:

.
??? extension
?   ??? js
?   ??? manifest.json
??? lib
?   ??? background
?   ?   ??? index.js
?   ??? content
?   ?   ??? index.js
?   ??? frame
?       ??? index.js
?       ??? models
?       ?   ??? ...
?       ??? views
?           ??? ...
??? package.json

在lib目录中,为每个上下文创建一个文件夹index.js作为入口点.该文件将引导该特定上下文的应用程序,require无论哪个模块和初始化应用程序的该部分.

然后使用browserify或watchify在创建包./extension/js/:

$ browserify ./lib/background/index.js -o ./extension/js/background.js
$ browserify ./lib/content/index.js -o ./extension/js/content.js
$ browserify ./lib/frame/index.js -o ./extension/js/frame.js

如果你打算重用,说同样的模块,background.js并且content.js,只要require()它在每个上下文和browserify将建立相应的包.

可以使用Gruntfile.js或自定义npm脚本简化此过程.

您可以在此处尝试此方法的实例.