[英]After trying to enqueue several Javascript scripts in my Wordpress PHP file, how can I prevent “cannot use import statement outside a module?”
I'm writing a plugin for my Wordpress php file, which seeks to emulate an HTML file I had previously made, which calls several Javascript in this manner: I'm writing a plugin for my Wordpress php file, which seeks to emulate an HTML file I had previously made, which calls several Javascript in this manner:
<script src="./Controller/myfile.js" type="module" defer></script>
However, with Wordpress, bc I'm not making a simple.html file, I cannot do that directly.但是,对于 Wordpress,我没有制作简单的.html 文件,我不能直接这样做。 I have enqueued scripts, but when I try to go to where these scripts are run, I see
Uncaught SyntaxError: Cannot use import statement outside a module
and unexpected token: export
in the browser console.我已将脚本排入队列,但是当我尝试将 go 运行到这些脚本的运行位置时,我看到
Uncaught SyntaxError: Cannot use import statement outside a module
and unexpected token: export
in the browser console。 What do I need to put in my.php file to fix this problem?我需要在 my.php 文件中添加什么来解决此问题?
The file ./Controller/myfile.js
or any other file you enqueue in WP has to be the final output/build of your JS.文件
./Controller/myfile.js
或您在 WP 中排队的任何其他文件必须是您的 JS 的最终输出/构建。 That means you can't have import
statements or anything like that since all code must be on that file.这意味着您不能有
import
语句或类似的东西,因为所有代码都必须在该文件中。 This is because once WP renders your file in <script>
, no further processing happens (ie no resolving modules, etc.).这是因为一旦 WP 在
<script>
中呈现您的文件,就不会发生进一步的处理(即没有解析模块,etc。)。 I'd recommend using something like Gulpjs to bundle up your source js code and produce a minified build file which you can then enqueue.我建议使用Gulpjs 之类的东西来捆绑您的源 js 代码并生成一个缩小的构建文件,然后您可以将其排入队列。
Edit:编辑:
If your enqueued script doesn't have type="module"
, then follow Aioros's comment above and enqueue it properly with module as your type attribute.如果您的入队脚本没有
type="module"
,请按照上面 Aioros 的评论并使用 module 作为您的 type 属性将其正确入队。 I'd still recommend getting a bundle since type="module" has limited support
developer.mozilla.org modules我仍然建议使用捆绑包,因为 type="module" 对developer.mozilla.org 模块
type="module" has limited support
When you enqueue your script with wp_enqueue_script()
, you end up with a script element like this:当您使用
wp_enqueue_script()
将脚本排入队列时,您最终会得到如下脚本元素:
<script src="./Controller/myfile.js"></script>
As you can see, it doesn't have the type="module"
attribute, and I imagine that's why you get an error for import
.如您所见,它没有
type="module"
属性,我想这就是您收到import
错误的原因。 There are a few ways to add it.有几种方法可以添加它。
I don't know how exactly you're registering/enqueuing the script, but let's pretend it's like this:我不知道您究竟是如何注册/排队脚本,但让我们假设它是这样的:
wp_enqueue_script("myfile", "Controller/myfile.js");
Then you could add to your plugin a filter like:然后你可以在你的插件中添加一个过滤器,比如:
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);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.