Question

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

我整理了一个 Plunker ，出于某种原因，该错误给出了“未捕获的ReferenceError：未定义Barba”错误。

我在做什么错了？

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）。

Answer 2

我下载了您的代码，并在我的本地计算机上运行了它，效果很好。看来您无法在Plunker中使用Barba.js。 Barba.js使用PJAX来完成一些非常棘手的事情，例如通过AJAX加载页面以及更改浏览器的URL，因此在Plunker或jsFiddle等代码测试器中无法正常工作也就不足为奇了。

“未定义Barba”错误

2 个答案: