在 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 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

Answer 2

您可以尝试从 unpkg 加载它

<script src="https://unpkg.com/package_name@version"></script>

希望这可以帮助。