来自文件的 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

import 和exports 只适用于模块系统，如使用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>