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

Question

我正在 /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();

Answer 1

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

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

---

另外，import 语句是 ES6 功能的一部分。

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

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