在 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_handle使用script_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 module
import 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 source
console.log($, Swiper) //will output jquery and swiper

这是一篇关于浏览器中 ECMAScript 模块的好文章