javascript - "Barba is not defined"错误

Question

我刚刚发现 Barba.js并发现它非常有用。它提供同一网站的 URL 之间的平滑过渡。

我整理了一个 Plunker ，出于某种我能找到的原因，它给了我一个“Uncaught ReferenceError: Barba is not defined”错误。

我做错了什么？

Answer 1

问题是 Plunker。 Barba.js 应该可以正常工作，但是 Plunker 正在使用 define() 进行一些 AMD 加载，这会丢弃 Barba.js 包。

不是将导出的 Barba 分配给 window，逻辑是使用 define()，因为它在 Plunker 中是全局的。

如果您希望您的示例在全局范围内工作，您可以为了演示而对 Barba.js 稍作修改，或者您可以尝试使用其他工具，例如 Codepen。老实说，由于 Barba 的工作方式，我不确定是否有任何在线工具能很好地与它配合使用。

然而，如果你想做一个小的修改来让它工作，在 Plunker 中打开 barba.js，你应该在顶部看到:

 1    (function webpackUniversalModuleDefinition(root, factory) {
 2      if(typeof exports === 'object' && typeof module === 'object')
 3          module.exports = factory();
 4      else if(typeof define === 'function' && define.amd)
 5          define("Barba", [], factory);
 6      else if(typeof exports === 'object')
 7          exports["Barba"] = factory();
 8      else
 9          root["Barba"] = factory();
10     })(this, function() {

用以下内容替换第 2-9 行:

 1    (function webpackUniversalModuleDefinition(root, factory) {
 2        window["Barba"] = factory();
 3    })(this, function() {

这应该将 Barba 定义为全局变量，以便您的 script.js 可以使用它。

请勿在本地编辑原始文件并在任何其他环境中尝试此操作。这只是为了理解，以及您尝试运行的演示。

已更新

应该注意的是，考虑到 Barba.js 的功能，无法知道它在在线 IDE 或代码共享工具(例如 plunker)中 100% 工作。

根据您提出的评论中的其他问题，如果您想使用该软件包，那么，是的，最好拥有您网站的本地工作版本。您的网站应该能够在根本不使用 Barba 的情况下工作。然后，一旦您准备好添加漂亮的过渡，添加 Barba，并使其正常工作。

xamp 堆栈应该可以很好地在本地运行您的网站。

老实说，这是您必须彻底阅读 Barba 文档的地方，如果您遇到问题，请搜索软件包的 Github 问题，看看是否有其他人有类似的东西 (https://github.com/luruke/barba.js/issues?page=1&q=is%3Aissue+is%3Aopen)。