从 CodeSandbox 导出 ZIP 后无法在模块错误外使用导入语句

Cannot use import statement outside a module error after export ZIP from CodeSandbox

我已经下载了这个 Phaser/MatterJS example from Codesandbox(->文件 ->导出到 ZIP)。 运行 它在本地 returns 这个错误:

Uncaught SyntaxError: Cannot use import statement outside a module - index.js:1

如何解决这个问题?

到目前为止我尝试了什么:

index.html:

<script type = "module" src = "./js/index.js">

你必须告诉浏览器这个js文件是一个模块,然后它会在后面改变一些东西让你使用它。 This article 对模块入门很有帮助。

正如您亲眼所见,写在文件中的 javascript 并不是浏览器开箱即用就能理解的内容,因此您会遇到错误。

发送浏览器能看懂的js,需要用到webpack,parcel之类的工具。已经在项目中使用了您共享的地块。

您必须执行以下操作:

  • 安装项目依赖
  • 在项目的根目录中运行npm run start
  • parcel 将打包文件,然后打开包含结果的 html 页面

不幸的是,当我尝试这个包裹对我不起作用时,出现了与 JSON 加载相关的错误,但是我已经设法让游戏正常运行,通过 运行ning npm run build,这将为您输出名为 dist.

的文件夹中的构建文件

转到 dist 文件夹,在那里启动一个本地服务器并访问它应该工作的文件,但是对我来说它再次不起作用。但我注意到这是由于 parcel 没有获得捆绑的 js 文件的正确相对路径。

为了解决这个问题,打开dist文件夹中的index.html文件,你会发现那里有一个脚本

<script src="/js.d8530414.js"></script>

我不得不将其更改为

<script src="./js.d8530414.js"></script> // because this was the correct file in my file system

之后访问dist文件夹下的html文件,游戏运行正常

显然这种工作方式并不方便,因为对于您想要看到的每个更改,您都必须使用 npm run build 重新构建项目。您需要解决 npm run start 不工作的问题,如果您使用的 os 与我的不同,则可能不会出现此问题。如果发生这种情况,那么我建议更新 parcel 并重试,如果问题仍然存在,那么你可以 look here 因为问题似乎与 parcel 编译它时想要 json 文件作为 json 的相位器有关到 javascript 对象。