Question

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

视频未涉及的一件事是如何制作一个有多个视图的Chrome应用仍以 DRY 的方式使用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或custom npm script。

可以简化此过程

您可以尝试使用此方法的工作示例here。

Answer 2

对于多个入口页面和一个单片JS脚本，我们的想法是封装您的JS逻辑，使您的background.html或后台脚本将所需的函数/对象暴露给全局（读取窗口）上下文。然后在其他条目页面（例如选项或弹出窗口）中使用它来访问后台页面的全局上下文：

Application = chrome.extension.getBackgroundPage().myGlobalFunction();

This SO Question为布局和相互作用提供了一些见解。

这允许您拥有一个版本的browserify创建的JS，并允许它在同一扩展的其他页面上进行通信/执行。

Answer 3

像Browserify这样的库通常用于支持“单页面Web应用程序”。也就是说，应用程序中通常只有一个HTML文件（通常是public / index.html），它只是作为加载硬依赖项的入口点（例如browserify的连接输出）。其他所有内容都由Javascript管理，无论您选择哪种前端框架（即Backbone，SpineJS等）。

虽然单页网页应用可能包含多个“屏幕”数据，但这些网页的实际HTML通常是html片段（通常使用javascript模板中间件，如Handlebars，Mustache，ECO等），通过AJAX加载，然后插入页面的运行体。也就是说 - 这些新的页面片段已经可以访问此页面中之前加载的javascript。

所以你因为只有一个页面而正在使用SPA，所以你不会重复使用JS导入。

如果您以前习惯于使用服务器端语言呈现大部分UI的全栈Web开发，那么单页Web应用程序的想法可能会有点震撼。虽然大多数SPA往往都有一个服务器端组件，但这通常会缩减为RESTful API，提供数据端点（AJAX调用将会遇到）和持久性。

Answer 4

在Windows 10下，我使用MKLINK在项目中共享我的源脚本（js）和样式（css）文件

MKLINK /J "D:\Projects\Chrome Extension Projects\myproject\shared" "D:\Projects\Chrome Extension Projects\shared"

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

4 个答案: