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-teme.js尝试实例化一个新的JSZip实例，如下所示：

var zip = new JSZip();

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

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

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

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

我浏览了整个社区，但没有看到其他人在Jive中使用JSZip，但我认为尝试一下并没有什么坏处：)

Answer 1

JSZip使用browserify生成带有UMD定义的dist/文件。如果UMD代码检测到AMD环境(存在带有amd attribute的define function )或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);