“未定义barba”错误

问题是普朗克。js应该可以正常工作,但是plunker正在使用define()执行一些amd加载,这是在丢弃barba.js包。

而不是指定导出的 Barba 到 window ,逻辑是使用 define() 因为它是一个全球性的掠夺者。

如果您希望您的示例在global中工作,可以为了演示而对barba.js稍作修改,也可以尝试其他工具,如codepen。 老实说,由于barba是如何工作的,我不确定是否有任何在线工具能很好地使用它。

尽管如此,如果你想做一个小的修改,只是为了让它工作,打开barba.js in plunker,你应该看到在顶部:

 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,并使其工作。

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

老实说,在这里您必须彻底阅读barba的文档,如果有问题,请搜索包的github问题,看看是否有其他人有类似的问题。( https://github.com/luruke/barba.js/issues?page=1&q=is%3Aissue+is%3Aopen )中。

我下载了你的代码并在我的本地机器上运行,运行良好。似乎你不能在Plunker中使用barba.js。js使用pjax来做一些非常棘手的事情,比如通过ajax加载页面,还可以更改浏览器的url,所以在plunker或jsfiddle这样的代码测试程序中它不会工作也就不足为奇了。