如何在wordpress主题中添加JS模块

Question

我想添加一个js文件，它将一个类导出到我的WordPress主题。但是在使用wp_enqueue_script()函数时，它显示了

Uncaught :意外令牌“导出”

如何添加js模块以使类的导出和导入正常工作？

这是我的functions.php文件。在这里，countUp.min.js导出一个类，main.js导入该类，并将其用于某些功能。但是我不能进出口。

function loadJS(){
    wp_register_script('fontawesome', 'https://kit.fontawesome.com/486392b9f0.js', '','', true);
    wp_enqueue_script('fontawesome');
    wp_register_script('countUp', get_template_directory_uri().'/js/countUp.min.js', '', 1, true);
    wp_enqueue_script('countUp');
    wp_register_script('showOnScroll', get_template_directory_uri().'/js/show-on-scroll.js', '', 1, true);
    wp_enqueue_script('showOnScroll');
    wp_register_script('products', get_template_directory_uri().'/js/products.js', '', 1, true);
    wp_enqueue_script('products');
    wp_register_script('main', get_template_directory_uri().'/js/main.js', array('countUp'), 1, true);
    wp_enqueue_script('main');
}
add_action('wp_enqueue_scripts', 'loadJS');

在main.js文件中，导入语句是

import { CountUp } from './countUp.min.js';

我得到的错误是

Uncaught SyntaxError: Cannot use import statement outside a module

Answer 1

为此，您需要确保将main.js作为ES6模块加载。首先，在script_loader_tag钩子上添加一个过滤器；

add_filter( 'script_loader_tag', 'load_as_ES6',10,3 );

它将调用将类型“模块”附加到脚本标记的函数。

public function load_as_ES6($tag, $handle, $source){
        if('main'===$handle){
            $tag ='<script src="' . $source . '" type="module" ></script>';
        }
        return $tag;
    }

然后，main.js将被识别为一个ES6模块，该模块可以通过在文件顶部写入类似的内容来导入其他ES6模块的导出：

import { countUp } from 'path_to_module/countUp.min.js'