Код не выполняется в источнике типизированного скрипта модуля Javascript [ES6] - PullRequest
0 голосов
/ 11 февраля 2019

Пытаюсь использовать ES6, но я застрял на чем-то.Чтобы упростить задачу, есть две проблемы:

  1. Исходный код JS не выполняется в скрипте с именем module="type" HTMLelements
  2. , импорт напрямую из index.html возвращает SyntaxError: fields are not currently supported

Пробовал и копал оба дела, не могу понять, что не так.Пути верны.Не помещая расширение .js в from, оператор возвращал ошибки для второй попытки с импортом, использованным непосредственно в index.html.Ранее initGame() был $(document).ready(function(e) { ... });.Также выдает ошибку, если я не разделяю type="module" внутри index.html.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <meta http-equiv="Content-Language" content="en">

  <title></title>

  <link rel="stylesheet" href="design/css/main.css">
</head>
<body>
  <main id="displayer">
  </main>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="module">
  import { initGame } from "./lib/js/core.js";
  initGame();
</script>
<script type="application/javascript, module" src="./lib/js/core.js"></script>
</html>
//core.js
import { Board } from './classes/Board.js';
import { Pawn } from './classes/Pawn.js';

export function initGame () {
  console.log("plop");
  var $displayer = $('#displayer');
  var board = new Board($displayer, 32, 19, 19, ['#ffffcc', '#333333']);
  console.debug(board);
}
//Board.js
import { TileMap } from "./TileMap.js"

export class Board extends TileMap
{
    _tileColors;

    constructor(wrapper, tileSize, columnsNb, rowsNb, tileColors) {
        super(wrapper, tileSize, columnsNb, rowsNb);

        this._name = "Board:" + columnsNb + ":" + rowsNb;

        this.selector.css({
            class: "board"
        })

        tileColors.forEach(function(color, i) {
            this._tileColors[i] = color;
        });
        this.colorize();
    }

    colorize() {
        this._grid.forEach(function(col, i) {
            col.forEach( function(tile, j) {
                tile.color = ((i + j) % 2 === 0) ? this.getColor(0) : this.getColor(1);
            });
        });
    }

    getColor(index) {
        return this._tileColors[index];
    }
}

Просто хочу использовать систему модуляции ES6 для удобства и самообучения.

Ошибки:

  1. Если нет type="module" src="path" указано:
    • SyntaxError: import declarations may only appear at top level of a module
  2. пустая консоль, если просто <script type="module"> и $(document).ready() вариант для core.js
  3. Если эта версия активна:
    • SyntaxError: fields are not currently supported

1 Ответ

0 голосов
/ 22 марта 2019

Синтаксис, который вы использовали для объявления _tileColors, называется объявлением поля и является весьма экспериментальным предложением.Они были реализованы только в Chrome 72 и выше, и, кажется, частично реализованы в некоторых сборках Firefox, если вы включите для них экспериментальный флаг.

Вам необходимо удалить строку _titleColors; из класса и установитьthis._titleColors внутри конструктора.Кроме того, код вашего конструктора не работает, он пытается установить содержимое _titleColors, но переменная даже не инициализирована.Вместо этого вы можете сделать (предполагая, что titleColors является массивом):

// create an array copy of titleColors
this._tileColors = [...titleColors];
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...