Javascript 从文件导入类产生 "Uncaught SyntaxError: Unexpected Identifier"

Question

我正在重构我的 javascript 代码以使其更加面向对象，但我无法获得应用类的最新功能!

首先，我在单独的文件中声明该类，如下所示:

// models/player.js 
export default class Player {

   constructor() {
      //loads of code
   }
}

然后，我在 html 中引用该文件，如下所示:

<script src="js/models/player.js" type="module"></script>
<script src="js/game.js" type="text/javascript"></script>

最后，我尝试将类导入到我的主 js 文件中，如下所示:

// game.js
import Player from './models/player';

但由于某种原因，Chrome(甚至 Canary)在第一个导入行中向我抛出了“未捕获的语法错误:意外的标识符”!

我正在尝试遵循我可以在网上找到的所有规范和示例。我缺少什么？

Answer 1

导入和导出仅适用于模块系统，例如使用 webpack 等。但是当您直接插入脚本文件时，您不需要它:

// models/player.js 
class Player {

   constructor() {
      //loads of code
   }
}

<script src="js/models/player.js" type="text/javascript"></script>
<script src="js/game.js" type="text/javascript"></script>

现在，您可以直接使用该类:(在 game.js 中)

new Player

如果您更喜欢在插入脚本时使用导入导出，那么您必须将其类型指定为模块:

<script src="js/models/player.js" type="module"></script>
<script src="js/game.js" type="module"></script>