Класс импорта Javascript из файла выдает «Uncaught SyntaxError: Неожиданный идентификатор»

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) выдает мне «Uncaught SyntaxError: Unexpected Identifier» в этом самом первом импортелиния!

Я пытаюсь следовать всем спецификациям и примерам, которые могу найти в Интернете.Что мне не хватает?

Answer 1

Импорт и экспорт хороши только для использования в модульной системе, например, при использовании веб-пакета и т. Д. Но когда вы непосредственно вставляете файл скрипта, он вам не нужен:

// 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>