7

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

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

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

4

4 回答 4

9

我发现一种行之有效的技术是为每个上下文（例如背景、内容等）创建一个单独的包。这是一个示例目录结构：

.
├── 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 脚本来简化。

您可以在此处尝试此方法的工作示例。

于 2013-08-31T22:45:30.587 回答
4

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

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

这个 SO Question提供了一些关于布局和相互作用的见解。

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

于 2013-03-08T12:08:40.080 回答
2

Browserify 之类的库通常设计为支持“单页 Web 应用程序”。也就是说，应用程序中通常只涉及一个 HTML 文件（通常是 public/index.html），它只是作为加载硬依赖项（例如 browserify 的串联输出）的入口点。其他一切都由 Javascript 以及您选择的任何前端框架（即 Backbone、SpineJS 等）管理。

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

因此，您对 SPA 感到厌烦，因为您只有一页，因此您不会重复使用 JS 导入。

如果您以前习惯于全栈 Web 开发，其中大部分 UI 由服务器端语言呈现，那么单页 Web 应用程序的想法可能会有点令人震惊。虽然大多数 SPA 倾向于具有服务器端组件，但这通常简化为提供数据端点（AJAX 调用将命中）和持久性的 RESTful API。

于 2013-03-07T08:50:27.933 回答
0

在 windows 10 下，我曾经MKLINK在项目之间共享我的源脚本（js）和样式（css）文件

MKLINK /J "D:\Projects\Chrome Extension Projects\myproject\shared" "D:\Projects\Chrome Extension Projects\shared"
于 2017-11-04T10:02:21.947 回答