在 WordPress 插件中导入节点模块

Question

我正在使用wp_register_script并wp_enqueue_script为我正在开发的 WordPress 插件的管理屏幕引入一些自定义 JavaScript 逻辑。

import当我尝试在 JavaScript 顶部添加语句以引入几个节点模块时，问题就出现了。可以理解的是，这给了我以下浏览器控制台消息：

导入声明只能出现在模块的顶层

告诉 WordPress 将 JavaScript 的自定义位视为模块的标准方法是什么？为了确保可以导入我的节点模块，我还需要遵循其他步骤吗？

Answer 1

告诉 WordPress 将 JavaScript 的自定义位视为模块的标准方法是什么？您所需要的只是在标签type="module"上<script>，浏览器会将此脚本视为 ECMAScript 模块。使用 wordpress，要type在脚本上添加属性，首先将脚本排入队列function enqueue_plugin_scripts() {    wp_enqueue_script('module_handle', get_template_directory_uri() . '/path/to/module.js')}add_action( 'wp_enqueue_scripts', 'enqueue_plugin_scripts' );然后添加type="module"到module_handleusingscript_loader_tag钩子function set_scripts_type_attribute( $tag, $handle, $src ) {    if ( 'module_handle' === $handle ) {        $tag = '<script type="module" src="'. $src .'"></script>';    }    return $tag;}add_filter( 'script_loader_tag', 'set_scripts_type_attribute', 10, 3 );为了确保可以导入我的节点模块，我还需要遵循其他步骤吗？您不能使用裸导入，例如：import $ from "jquery"在浏览器中会失败。要从 导入node_modules，您必须提供模块的完整路径，否则浏览器会抱怨Relative references must start with either "/", "./", or "../"以下是一些示例：这行不通import $ from "jquery";import Swiper from "swiper";这将工作import "./node_modules/jquery/dist/jquery.js" //because jquery doesn't have browser-compatible ES moduleimport Swiper from "./node_modules/swiper/js/swiper.esm.browser.bundle.js";import Swiper from 'https://unpkg.com/swiper/js/swiper.esm.browser.bundle.min.js'; //from external sourceconsole.log($, Swiper) //will output jquery and swiper

Answer 2

您可以尝试从 unpkg 加载它<script&nbsp;src="https://unpkg.com/package_name@version"></script>希望这可以帮助。