语法错误:找不到导入:定义js类时的默认设置

时间:2020-07-02 10:32:33

标签: javascript wordpress woocommerce unpkg

我正在构建一个WordPress插件。我在名为demo-one.js的JavaScript文件中包含以下内容:

import WooCommerceRestApi from "https://unpkg.com/@woocommerce/woocommerce-rest-api@1.0.1/index.js";

alert('Hello!');

class someClass {
    constructor() {
        alert("Hello again!");
    }
}

export default function(){
    var mySomeClass = new someClass();
}

...,我发现在控制台中,出现以下错误:

SyntaxError:找不到导入:默认| demo-one.js:1:7

我可以在线上找到关于export关键字的所有信息,这些信息是在类之外使用的,自由浮动的值和函数,因此,我为盲目飞行而道歉。

我非常确定自己已正确定义了默认导出,但似乎没有。我在这里做什么错了?

1 个答案:

答案 0 :(得分:2)

要使用import,您必须将该JavaScript注册为模块:

// Your regular enqueue here
wp_enqueue_script( 'myplugin.js.main', $url, [], $path );

// Add type="module" to your script tag.
// Before: <script src="myscript.js"></script>
// After:  <script src="myscript.js" type="module"></script>
add_filter( 'script_loader_tag', function( $tag, $handle, $src ) {
    // Replace "myplugin.js.main" with your asset's handler
    if ( $handle !== 'myplugin.js.main' ) {
        return $tag;
    }

    return sprintf( '<script src="%s" type="module"></script>', esc_url( $src ) );
}, 10, 3 );