«Uncaught SyntaxError: Невозможно использовать оператор импорта вне модуля» при импорте ECMAScript 6

Я использую ArcGIS JSAPI 4.12 и хочу использовать Пространственные иллюзии для рисования военных символов на карте.

Когда я добавляю milsymbol.jsв скрипт, консоль возвращает ошибку

Uncaught SyntaxError: Невозможно использовать оператор импорта вне модуля`

поэтому я добавляю type="module"в скрипт, а потом он возвращает

Uncaught ReferenceError: ms не определена

Вот мой код:

<link rel="stylesheet" href="https://js.arcgis.com/4.12/esri/css/main.css">
<script src="https://js.arcgis.com/4.12/"></script>
<script type="module" src="milsymbol-2.0.0/src/milsymbol.js"></script>

<script>
    require([
        "esri/Map",
        "esri/views/MapView",
        "esri/layers/MapImageLayer",
        "esri/layers/FeatureLayer"
    ], function (Map, MapView, MapImageLayer, FeatureLayer) {

        var symbol = new ms.Symbol("SFG-UCI----D", { size: 30 }).asCanvas(3);
        var map = new Map({
            basemap: "topo-vector"
        });

        var view = new MapView({
            container: "viewDiv",
            map: map,
            center: [121, 23],
            zoom: 7
        });
    });
</script>

Итак, добавляю я type="module"или нет, всегда есть ошибки. Однако в официальном документе «Пространственные иллюзии» type="module"в сценарии их нет. Я сейчас очень запутался. Как им удается заставить его работать без добавления типа?

Файл milsymbol.js

import { ms } from "./ms.js";

import Symbol from "./ms/symbol.js";
ms.Symbol = Symbol;

export { ms };

Я получил эту ошибку, потому что я забыл type = "module" внутри тега script:

<script type="module" src="milsymbol-2.0.0/src/milsymbol.js"></script>

Похоже, причина ошибок:

1) Вы в настоящее время загружаются исходный файл в srcкаталоге вместо встроенного файла в distкаталоге (вы можете увидеть , что Намеченные распространенный файл здесь ). Это означает , что вы используете исходный код нативный в неизмененном / несвязанных состоянии, что приводит к следующей ошибке: Uncaught SyntaxError: Cannot use import statement outside a module. Это должно быть исправлено с помощью связанной версии, поскольку пакет использует накопительный пакет для создания пакета.

2) Причина, по которой вы получаете Uncaught ReferenceError: ms is not definedошибку, заключается в том, что модули ограничены областью, и поскольку вы загружаете библиотеку с использованием собственных модулей, msона не находится в глобальной области видимости и поэтому недоступна в следующем теге сценария.

Похоже, вы должны иметь возможность загрузить distверсию этого файла, msопределенную в window. Посмотрите этот пример у автора библиотеки, чтобы увидеть пример того, как это можно сделать.

Я решил эту проблему, выполнив следующие действия:

При использовании модулей ECMAScript 6 из браузера используйте расширение .js в своих файлах и в теге сценария add type = "module".

При использовании модулей ECMAScript 6 из среды Node.js, используйте расширение .mjsв ваших файлах и используйте эту команду для запуска файла:

node --experimental-modules filename.mjs

Я также столкнулся с той же проблемой, пока я не добавил type = "module" в скрипт. До этого было так

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

И после изменения его

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

Сработало отлично

Ошибка возникает из-за того, что файл, на который вы ссылаетесь в своем HTML-файле, является несвязанной версией файла. Чтобы получить полную версию, вам нужно установить ее с npm:

npm install --save milsymbol

Это загрузит полный пакет в вашу node_modulesпапку.

Затем вы можете получить доступ к автономному уменьшенному файлу JavaScript по адресу node_modules/milsymbol/dist/milsymbol.js

Вы можете сделать это в любом каталоге, а затем просто скопировать приведенный ниже файл в свой /srcкаталог.

Просто добавьте .packмежду именем и расширением в <script>теге в src. то есть:

<script src="name.pack.js">
// code here
</script>