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