在我的 Wordpress PHP 文件中尝试将多个 Javascript 脚本排队后，我该如何防止"cannot use import statement outside a module?"

Question

我正在为我的Wordpress php文件编写一个插件，它试图模拟我以前制作的HTML文件，该文件以这种方式调用多个Javascript：

<script src="./Controller/myfile.js" type="module" defer></script>

但是，使用Wordpress，bc，我不是在制作一个简单的.html文件，我不能直接这样做。我已将脚本排队，但是当我尝试转到运行这些脚本的位置时，我在浏览器控制台中看到Uncaught SyntaxError: Cannot use import statement outside a module和unexpected token: export。我需要在.php文件中放入什么来解决此问题？

Answer 1

您在WP 中排队的文件./Controller/myfile.js或任何其他文件必须是 JS 的最终输出/构建。这意味着你不能有import语句或类似的东西，因为所有代码都必须在该文件中。这是因为一旦WP以<script>格式呈现您的文件，就不会发生进一步的处理(即没有解析模块，等等(。我建议使用 Gulpjs 之类的东西来捆绑你的源代码 js 代码并生成一个缩小的构建文件，然后你可以排队。

编辑：

如果您的排队脚本没有type="module"，请按照上面的 Aioros 评论进行操作，并使用模块作为您的类型属性正确排队。我仍然建议获取捆绑包，因为type="module" has limited supportdeveloper.mozilla.org 模块

Answer 2

当您将脚本与wp_enqueue_script()排队时，最终会得到如下所示的脚本元素：

<script src="./Controller/myfile.js"></script>

如您所见，它没有type="module"属性，我想这就是您收到错误的原因import.有几种方法可以添加它。

我不知道您究竟是如何注册/排队脚本的，但让我们假装它是这样的：

wp_enqueue_script("myfile", "Controller/myfile.js");

然后，您可以在插件中添加一个过滤器，例如：

function add_type_module_attribute($tag, $handle) {
if ( $handle !== 'myfile' ) {
return $tag;
}
// needed in case you already have a type='javascript' attribute
$new_tag = str_replace("type='text/javascript'", '', $tag);
// adding type='module'
$new_tag = str_replace(" src", " type='module' defer src", $tag);
return $new_tag;
}
add_filter('script_loader_tag', 'add_type_module_attribute', 10, 2);