未捕获的类型错误：$(...).accordion 不是 wordpress 中的函数

Question

您好，我在一个带有 wordpress 的网站上使用 jQuery UI 手风琴，我收到错误：“Uncaught TypeError: $(...).accordion is not a function”

在我的functions.php中，我加载了一个app.js，我在其中捆绑了jQuery UI文件和其他jQuery插件，使用这个函数：wp_enqueue_script('theme-js', get_template_directory_uri().'/js/app. js', array('jquery'), null, true);

我使用 webpack 来捆绑 app.js 文件。

这就是我在 webpack 的 main.js 中包含 jQuery UI 的方式：

var $ = window.jQuery;
var jqueryUi = require("./jquery-ui.min.js");

我已经禁用了我的 wordpress 安装中的所有插件并删除了其他 jQuery 插件。

谢谢。

Answer 1

1-Default Scripts Included and Registered by WordPress
2- 你没有添加/调用/入队 jQuery UI 手风琴
wp_enqueue_script('jquery-ui-accordion');
您可能需要添加/调用/入队 jQuery UI Core wp_enqueue_script('jquery-ui-core');
这是因为.accordion()是一个 jQuery UI 效果而不仅仅是 jQuery！
3- 确保用 ;
jQuery( document ).ready( function( $ ) { PUT YOU JS HERE });
包裹你的 JS 最后说明：您使用的是 node.js 吗？
如果不是，这是什么require???
希望这会有所帮助，SYA

Answer 2

在您的输出中，看起来可能是加载顺序问题。除非您提供未捆绑和捆绑的输出，否则很难说。

无论如何，这正是 WordPress 排队系统的设计目的——依赖管理。我会单独排队 jQuery UI 并通过 WP 专门分配适当的依赖项。这有望防止这样的问题，并防止双重包括 JS 文件的任何问题。如果您正在捆绑 jQuery UI 并且有一天使用依赖于它的插件，WP 可能会将它排入队列，并且您将在您的站点上加载两个版本。对性能不利，维护起来很头疼。

如果您担心性能但在您的网站上使用 HTTP/2，那么单独加载这些脚本应该不再像以前那样令人担忧，因为您可以通过一个 TCP 连接加载并且它是多路复用的.

https://http2.github.io/faq/#what-are-the-key-differences-to-http1x

简而言之，我发现单独入队的优势更多，而将其捆绑到您的 JS 中则更少。