我正在使用wp_register_script并wp_enqueue_script為我正在開發(fā)的 WordPress 插件的管理屏幕引入一些自定義 JavaScript 邏輯。import當(dāng)我嘗試在 JavaScript 頂部添加語句以引入幾個(gè)節(jié)點(diǎn)模塊時(shí)，問題就出現(xiàn)了?？梢岳斫獾氖?，這給了我以下瀏覽器控制臺(tái)消息：導(dǎo)入聲明只能出現(xiàn)在模塊的頂層告訴 WordPress 將 JavaScript 的自定義位視為模塊的標(biāo)準(zhǔn)方法是什么？為了確?？梢詫?dǎo)入我的節(jié)點(diǎn)模塊，我還需要遵循其他步驟嗎？
1 回答
HUH函數(shù)
TA貢獻(xiàn)1836條經(jīng)驗(yàn) 獲得超4個(gè)贊
告訴 WordPress 將 JavaScript 的自定義位視為模塊的標(biāo)準(zhǔn)方法是什么？
您所需要的只是在標(biāo)簽type="module"上<script>，瀏覽器會(huì)將此腳本視為 ECMAScript 模塊。
使用 wordpress，要type在腳本上添加屬性，首先將腳本排入隊(duì)列
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 );
為了確?？梢詫?dǎo)入我的節(jié)點(diǎn)模塊，我還需要遵循其他步驟嗎？
您不能使用裸導(dǎo)入，例如：import $ from "jquery"在瀏覽器中會(huì)失敗。要從 導(dǎo)入node_modules，您必須提供模塊的完整路徑，否則瀏覽器會(huì)抱怨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
FFIVE
TA貢獻(xiàn)1797條經(jīng)驗(yàn) 獲得超6個(gè)贊
您可以嘗試從 unpkg 加載它
<script src="https://unpkg.com/package_name@version"></script>
希望這可以幫助。
- 1 回答
- 0 關(guān)注
- 182 瀏覽
添加回答
舉報(bào)
0/150
提交
取消