google-chrome-extension - 您如何使用 Browserify 模块化您的 Chrome 应用程序？

Question

我看了以下Google Apps Office video并学习了如何使用 browserify 使用 node CommonJS 打包系统将您的 JS 打包到一个文件中。我喜欢这个想法，因为它还添加了许多移植到浏览器的节点库，并且可以处理 CoffeeScript。

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

如果这不是最佳实践，应该如何打包模块，使每个页面都以干巴巴的方式获取所需的模块，而不必重复自己或每页有单独的 browserify 包？其他人是如何处理这个话题的？

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 来简化。或 custom npm script .

您可以尝试此方法的工作示例 here .