我刚刚发现Barba.js并发现它非常有用。它提供了同一网站的URL之间的平滑过渡。
我整理了一个Plunker，由于我可以找到原因，它给了我一个“未捕获的ReferenceError：未定义Barba”错误。
我究竟做错了什么？
最佳答案
问题是柱塞。 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）。