"Barba is not defined" 错误

Question

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

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

我做错了什么？

Answer 1

我下载了您的代码并运行它在我的本地机器上并且运行良好。看来您不能在 Plunker 中使用 Barba.js。 Barba.js 使用 PJAX 来做一些非常棘手的事情，例如通过 AJAX 加载页面以及更改浏览器的 URL 所以它在代码测试器中不起作用也就不足为奇了，例如Plunker 或 jsFiddle。

Answer 2

问题是 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) .

"Barba is not defined" 错误

"Barba is not defined" error

javascript

jquery

transitions