导入类会导致错误:未捕获的语法错误意外标识符 [英] Importing classes causes Error: Uncaught syntaxerror unexpected identifier
问题描述
我尝试将Java类yellow.js导入到index.js中并获得
I try to import my Java Class yellow.js into my index.js and get
未捕获的语法错误意外标识符"
"Uncaught syntaxerror unexpected identifier"
在进行一些糊涂之后，我得到了建议来更改我的
after some googeling I get suggestet to change my
<script src="src/index.js"></script>
进入
<script type="module" src="src/index.js"></script>
但这会导致:
从源"null"访问"file:///D:/Game/src/index.js"处的脚本已被CORS政策屏蔽:仅跨源请求支持协议方案:http，数据，chrome，chrome扩展名，https
Access to script at 'file:///D:/Game/src/index.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https
我的代码现在看起来像这样:
My Code looks like this right now:
index.html
index.html
<html>
<head>
<title>Title</title>
<meta charset="UTF-8">
<style>
#gameScreen {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="gameScreen" width='600' height='600'></canvas>
<script type="module" src="src/index.js"></script>
</body>
</html>
index.js
import Yellow from "/src/yellow";
let canvas = document.getElementById("gameScreen");
let ctx = canvas.getContext("2d");
let yellow = new Yellow();
yellow.draw();
yellow.js
yellow.js
export default class yellow{
draw(ctx) {
ctx.fillStyle = '#ff0';
ctx.fillRect(20, 20, 100, 50);
}
}
我错过了什么吗?
我真的不明白如何在"type =" module"之类的地方添加内容.
I didn't really understand where an how to add the "type="module" thing.
推荐答案
在浏览器上，模块名称必须具有其扩展名(因此， yellow.js ，而不是 yellow )，除非它们在您页面的模块映射中列出；相对模块引用必须以 .//或 ../开头(以将它们与模块映射中列出的模块的引用区分开).
On browsers, module names must have their extensions (so yellow.js, not yellow) unless they're listed in a module map for your page; relative module references must start with ./ or ../ (to distinguish them from references to modules listed in a module map).
因此，如果您不使用模块映射，则此
So if you're not using a module map, this
import Yellow from "/src/yellow";
需要成为
import Yellow from "./yellow.js";
它是 ./，因为 index.js 和 yellow.js 位于同一位置，并且相对路径相对于模块进行导入( index.js )，而不是导入该模块的HTML.
It's ./ because index.js and yellow.js are in the same place, and the relative path is relative to the module doing the import (index.js), not the HTML that imported that module.
重新使用 type ="module" (必须执行)时得到的错误:
Re the error you get when you do use type="module" (which you must do):
这导致此错误:
CORS策略已阻止从原始"null"访问"file:///D:/Game/src/index.js"处的脚本:CORS策略仅支持跨原始请求:HTTP，数据，chrome，chrome扩展名，https.
Access to script at 'file:///D:/Game/src/index.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
尽管Firefox允许，但大多数浏览器不允许您通过 file:// URL进行此操作.但是，即使使用Firefox，也最好使用本地Web服务器进行Web开发，因为许多或与 file:// URL相对于> http://和 https:// URL.您的IDE可能已嵌入其中，或者在本地安装Apache或nginx相当简单，或者您可以使用 Node.js滚动自己的IDE.和快递或 Koa .
Most browsers won't let you do this from a file:// URL, although Firefox does. Even when using Firefox, though, it's best to use a local webserver for web development, as many things are either blocked or behave differently from file:// URLs vs http:// and https:// URLs. Your IDE may have one embedded in it, or it's fairly straightforward to install Apache or nginx locally, or you might roll your own with Node.js and Express or Koa.
这篇关于导入类会导致错误:未捕获的语法错误意外标识符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
