时间戳

首页 > 解决方案 > jQuery 未加载到 WordPress 中的自定义 js 文件中

jquery - jQuery 未加载到 WordPress 中的自定义 js 文件中

问题描述

我正在 /mytheme/js/live-search.js 中的自定义 js 文件中编写一些代码 在 js 文件的顶部，我有 [ import $ from 'jquery'; ]。在我的functions.php中，我的wp_enqueue_script函数具有array（'jquery'）的依赖关系，但是当我加载页面时，我仍然得到一个Uncaught SyntaxError：该js文件中第一行的意外标识符。

我在我正在处理的本地 WP 站点上进行了相同的设置，并且在那里工作得很好。我错过了什么？

在functions.php中

function asset_files() {
    wp_enqueue_script('search-jsfile', get_theme_file_uri('/js/live-search.js'), array('jquery'), '1.0', true);
}
add_action('wp_enqueue_scripts', 'asset_files');

这是我的代码的开始

class Search {
    constructor() {
        this.openButton = $("#search-icon-btn");
        this.closebutton = $(".search-overlay__close");
        this.searchOverlay = $(".search-overlay");
        this.events();
    }

    events() {
        this.openButton.on("click", this.openOverlay);
        this.closebutton.on("click", this.closeOverlay);
    }

    openOverlay() {
        this.searchOverlay.addClass("search-overlay--active");
    }

    closeOverlay() {
        this.searchOverlay.removeClass("search-overlay--active");
    }
}

var liveSearch = new Search();

标签： jquerywordpressloading

解决方案

jQuery 是 WordPress 核心的一部分。您无需导入两次。

只需import $ from 'jquery';在您的live-search.js文件中删除即可。

此外，该import语句是 ES6 特性的一部分。

要使 ES6 模块在浏览器中工作，您应该type="module"像这样添加到 script 标签：

<script type="module" src="filename.js"></script>

推荐阅读