如何将JavaScript库导入WordPress

Question

我正在尝试将'Rough Notation' JS库集成到我的WordPress网站中。

看:https://roughnotation.com/https://github.com/rough-stuff/rough-notation

我只是使用他们的基本演示代码(在:https://glitch.com/~basic-rough-notation)使用以下脚本:

<script type="module">
import { annotate } from 'https://unpkg.com/rough-notation?module';

const n1 = document.querySelector('em');
const n2 = document.querySelector('strong');
const n3 = document.querySelector('h1');
const n4 = document.querySelector('span');
const n5 = document.querySelector('#block');

const a1 = annotate(n1, { type: 'underline', color: 'blue' });
const a2 = annotate(n2, { type: 'circle', color: 'red', padding: 10 });
const a3 = annotate(n3, { type: 'box', color: 'orange' });
const a4 = annotate(n4, { type: 'highlight', color: 'yellow', iterations: 1, multiline: true });
const a5 = annotate(n5, { type: 'bracket', color: 'red', padding: [2, 10], brackets: ['left', 'right'], strokeWidth: 3 })

a1.show();
a2.show();
a3.show();
a4.show();
a5.show();

</script>

(我加载到WordPress作为' annotation -text.js')

最初我得到以下错误:

annotate_text .js?ver=6.0.1: Uncaught SyntaxError:不能在模块外使用import语句(在annotate-text.js ?版本= 6.0.1:1:1)

但StackOverflow阅读一些答案后我设置下面的脚本加载RoughNotation模块:

function annotate_scripts() 
wp_enqueue_script( 'module_handle', get_stylesheet_directory_uri() . '/js/annotate-text.js', 
array(), false, true );
}
add_action( 'wp_enqueue_scripts', 'annotate_scripts' );

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 );

所以，它看起来是工作和RoughNotation正在加载。但现在我得到了另一个不同的错误:

Uncaught TypeError: Cannot read properties of null (reading 'parentElement')
at p.attach (rough-notation.esm.js?module:1:9287)
at new p (rough-notation.esm.js?module:1:8501)
at _ (rough-notation.esm.js?module:1:12411)
at annotate-text.js?ver=6.0.1:10:18

想知道是否有人能告诉我如何解决这个问题。

我已经通过StackOverflow再次检查，但不确定如何实现类似问题的答案。

感谢

Answer 1

有一个关于如何添加Javascript库到你的Wordpress网站的很好的教程，请查看以下内容: