子主题中的节点模块

Question

我目前正在尝试与Supabase api连接，并希望在wordpress发行版中执行此操作。

我通过使用可视化工作室代码安装节点模块来添加节点模块。 接下来，我添加了代码，以便我可以进入包。

和连接。

我现在收到以下错误。

-GEThttps://websites.bentbecker.nl/wp-content/plugins/var/www/vhosts/bentbecker.nl/websites.bentbecker.nl/wp-content/themes/Impreza-child/node_modules/@supabase/supabase-js/dist/main/index.js?ver=2.2.3
[HTTP/3 404 Not Found 18ms]
-import declarations may only appear at top level of a module

这是我的函数.php文件

$package = file_get_contents(__DIR__ . '/package.json');
$package = json_decode($package, true);
foreach ($package['dependencies'] as $dep => $version) {
$subpackage = file_get_contents(__DIR__ . "/node_modules/$dep/package.json");
$subpackage = json_decode($subpackage, true);
$use = 'main';
if (isset($subpackage['browser'])) {
$use = 'browser';
}
if (isset($subpackage[$use])) {
$deps = array();
if (strpos($dep, 'jquery') !== false) {
$deps[] = 'jquery';
}
wp_enqueue_script("node_module-$dep", plugin_dir_url(__FILE__) . "node_modules/$dep/" . $subpackage[$use], $deps, $subpackage['version']);
}
if (isset($subpackage['style'])) {
wp_enqueue_style("node_module-$dep", plugin_dir_url(__FILE__) . "node_modules/$dep/" . $subpackage['style']);
}
}
?>
<script>

import { createClient } from '@supabase/supabase-js'
// Create a single supabase client for interacting with your database
const supabase = createClient('MY LINK', 'MY PUBLIC KEY')

</script>

Answer 1

您正在从插件中查找文件函数.phpplugin_dir_url(__FILE__)定义的 url 调用节点模块文件。

理想情况下，您应该使用get_template_directory_uri()

wp_enqueue_script("node_module-$dep", get_template_directory_uri() . "/node_modules/$dep/" . $subpackage[$use], $deps, $subpackage['version']);

和

wp_enqueue_style("node_module-$dep", get_template_directory_uri() . "/node_modules/$dep/" . $subpackage['style']);

添加脚本属性：

add_filter( 'script_loader_tag', 'add_module_to_script', 10, 3 );
function add_module_to_script( $tag, $handle, $source ) {
if ( "node_module-$dep" === $handle ) {
$tag = '<script type="text/javascript" src="' . $source . '" type="module"></script>';
}
return $tag;
}