"Nicht erfasster SyntaxError: Importanweisung kann nicht außerhalb eines Moduls verwendet werden" beim Importieren von ECMAScript 6

Ich verwende ArcGIS JSAPI 4.12 und möchte Spatial Illusions verwenden, um militärische Symbole auf einer Karte zu zeichnen.

Wenn ich milsymbol.jszum Skript hinzufüge , gibt die Konsole einen Fehler zurück

Nicht erfasster SyntaxError: Importanweisung kann nicht außerhalb eines Moduls verwendet werden`

Also füge ich type="module"dem Skript hinzu und dann kehrt es zurück

Nicht erfasster ReferenceError: ms ist nicht definiert

Hier ist mein Code:

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

Egal ob ich hinzufüge type="module"oder nicht, es gibt immer Fehler. Im offiziellen Dokument von Spatial Illusions ist jedoch nichts type="module"im Skript enthalten. Ich bin jetzt wirklich verwirrt. Wie schaffen sie es, dass es funktioniert, ohne den Typ hinzuzufügen?

Datei milsymbol.js

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

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

export { ms };

Ich habe diesen Fehler erhalten, weil ich den Typ = "Modul" im Skript-Tag vergessen habe:

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

Es sieht so aus, als ob die Ursache der Fehler folgende sind:

1) Sie sind zur Zeit die Quelldatei in dem Laden srcVerzeichnis anstelle der integrierten Datei im distVerzeichnis (können Sie sehen , was die verteilte Datei bestimmt ist hier ). Dies bedeutet, dass Sie den nativen Quellcode in einem unveränderten / entbündelten Zustand verwenden, was zu folgendem Fehler führt : Uncaught SyntaxError: Cannot use import statement outside a module. Dies sollte mithilfe der mitgelieferten Version behoben werden, da das Paket Rollup zum Erstellen eines Bundles verwendet.

2) Der Grund, warum Sie den Uncaught ReferenceError: ms is not definedFehler erhalten, ist, dass Module einen Gültigkeitsbereich haben und dass das Laden der Bibliothek mit nativen Modulen msnicht im globalen Bereich liegt und daher im folgenden Skript-Tag nicht verfügbar ist.

Es sieht so aus, als ob Sie in der Lage sein sollten, die distVersion dieser Datei zu laden, die auf der Website msdefiniert wurde window. Schauen Sie sich dieses Beispiel des Bibliotheksautors an, um ein Beispiel zu sehen, wie dies getan werden kann.

Ich habe dieses Problem folgendermaßen gelöst:

Wenn ECMAScript 6 Module aus dem Browser, verwenden Sie die Erweiterung .js in Dateien und im Script - Tag Add type = "module".

Wenn Sie ECMAScript 6-Module aus einer Node.js-Umgebung verwenden, verwenden Sie die Erweiterung .mjsin Ihren Dateien und verwenden Sie diesen Befehl, um die Datei auszuführen:

node --experimental-modules filename.mjs

Ich hatte auch das gleiche Problem, bis ich dem Skript den Typ = "Modul" hinzufügte. Vorher war es so

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

Und nachdem ich es geändert habe

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

Es hat perfekt funktioniert

Der Fehler wird ausgelöst, weil die Datei, mit der Sie in Ihrer HTML-Datei verknüpfen, die entbündelte Version der Datei ist. Um die gebündelte Vollversion zu erhalten, müssen Sie sie installieren mit npm:

npm install --save milsymbol

Dadurch wird das vollständige Paket in Ihren node_modulesOrdner heruntergeladen .

Sie können dann unter auf die eigenständige minimierte JavaScript-Datei zugreifen node_modules/milsymbol/dist/milsymbol.js

Sie können dies in einem beliebigen Verzeichnis tun und dann einfach die folgende Datei in Ihr /srcVerzeichnis kopieren .

Fügen Sie einfach .packzwischen dem Namen und der Erweiterung im <script>Tag in src hinzu. dh:

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