Question

我尝试将Java类yellow.js导入到index.js中并获得

“未捕获的语法错误意外标识符”

在进行了糊涂之后，我得到了建议来更改我的

<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

我的代码现在看起来像这样：

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

    export default class yellow{
      draw(ctx) {
            ctx.fillStyle = '#ff0';
            ctx.fillRect(20, 20, 100, 50);
        }
    }

我错过了什么吗？

我不太了解如何在何处添加"type="module"。

Answer 1

在浏览器中，模块名称必须具有扩展名（所以yellow.js，而不是yellow），除非它们在页面的module map中列出；相对模块引用必须以./或../开头（以将它们与模块映射中列出的模块的引用区分开来。）

因此，如果您不使用模块映射，则此

import Yellow from "/src/yellow";

需要成为

import Yellow from "./yellow.js";

它是./，因为index.js和yellow.js位于同一位置，并且相对路径是相对于执行导入（index.js）的模块而不是HTML的相对路径导入了该模块。

重新使用type="module"（必须这样做）时得到的错误：

这导致此错误：


CORS政策已阻止从来源“ null”访问“ file：/// D：/Game/src/index.js”处的脚本：CORS策略仅支持跨来源请求：协议，HTTP，数据， chrome，chrome扩展名，https。

尽管Firefox允许，但大多数浏览器都不允许您通过file:// URL进行此操作。不过，即使使用Firefox，也最好使用本地网络服务器进行Web开发，因为很多事物被阻止或行为不同于file:// URL与http://和{{ 1}}网址。您的IDE可能已嵌入其中，或者很容易在本地安装Apache或nginx，或者您可以使用Node.js和Express或Koa进行自己的滚动。

导入类会导致以下错误：错误的语法错误意外的标识符

1 个答案: