Jive 主题中的 JSZip

Question

有没有人成功地在他们的 Jive 主题中实现 JSZip？我无法实例化 JSZip 对象。这是设置： 我有一个 Jive 主题，在脚本文件夹中有一些自定义 JS 文件。 JS 文件通过 javascript.soy 模板中的脚本标签包含，如下所示：

/*javascript.soy*/ <script src="{themeUrl('/scripts/carousel.js')}"></script> <script src="{themeUrl('/scripts/jszip.min.js')}"></script> <script src="{themeUrl('/scripts/our-theme.js')}"></script>

our-theme.js 尝试像这样实例化一个新的 JSZip 实例：

var zip = new JSZip();

浏览器抛出“ReferenceError: JSZip is not defined”的错误（在 firebug 或 Chrome 开发者控制台中可见）。这很奇怪，因为我可以通过 Firebug 或单击“查看页面源”查看脚本文件，我可以验证具有 JSZip 定义的 jszip.min.js 的正确脚本标记是否已生成并且可以访问。

我能够调用其他外部 JS 文件中的函数，所以我唯一能想到的就是我错误地实例化了这个对象。根据 JSZip 文档：

对于浏览器，有两个有趣的文件：dist/jszip.js 和 dist/jszip.min.js（只包括一个）。 如果您使用 AMD 加载器（例如 RequireJS），JSZip 将自行注册：您只需将 js 文件放在正确的位置，或配置加载器（请参阅此处了解 RequireJS）。 没有任何加载器，JSZip 将在全局范围内声明一个名为 JSZip 的变量。

我没有使用 RequireJS。所以 JSZip 应该注册为一个全局变量，但我无法访问它并在窗口集合中看到它。

我浏览了社区，但看不到其他人使用 JSZip 和 Jive，但我认为尝试并没有什么坏处：)

Answer 1

JSZip 使用 browserify 生成具有 UMD 定义的 dist/ 文件。如果 UMD 代码检测到 AMD 环境（define function 和 amd attribute 存在）或 nodejs 环境（module object 和 exports object 存在）它赢了'不要暴露全局 JSZip 变量。

在您的浏览器中，您应该检查您是否处于这种情况（这些检查来自生成的jszip.js 文件）：

console.log("looks like AMD", "function" == typeof define && define.amd);
console.log("looks like nodejs", "object" == typeof exports && "undefined" != typeof module);