„Nieprzechwycony błąd składni: nie można użyć instrukcji importu poza modułem” podczas importowania ECMAScript 6

Używam ArcGIS JSAPI 4.12 i chcę używać Iluzji Przestrzennych do rysowania symboli wojskowych na mapie.

Gdy dodam milsymbol.jsdo skryptu, konsola zwraca błąd

Uncaught SyntaxError: Nie można użyć instrukcji importu poza modułem`

więc dodaję type="module"do skryptu, a następnie wraca

Uncaught ReferenceError: ms nie jest zdefiniowany

Oto mój kod:

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

Tak więc, niezależnie od tego, czy dodam, type="module"czy nie, zawsze występują błędy. Jednak w oficjalnym dokumencie Spatial Illusions nie ma type="module"takiego skryptu. Jestem teraz bardzo zmieszany. Jak udaje im się, aby działało bez dodawania typu?

Plik milsymbol.js

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

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

export { ms };

Wystąpił ten błąd, ponieważ zapomniałem typu = "moduł" wewnątrz tagu skryptu:

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

Wygląda na to, że przyczyną błędów są:

1) Aktualnie ładuje plik źródłowy w srckatalogu zamiast wbudowanego pliku w distkatalogu (można zobaczyć, co zamierzone rozprowadzane plik jest tutaj ). Oznacza to, że używasz kodu źródłowego natywną w niezmienionej / Stan uwolniony, co prowadzi do następującego błędu: Uncaught SyntaxError: Cannot use import statement outside a module. Należy to naprawić za pomocą wersji pakietowej, ponieważ pakiet używa pakietu zbiorczego do utworzenia pakietu.

2) Przyczyną Uncaught ReferenceError: ms is not definedbłędu jest to, że moduły mają zasięg, a ponieważ ładujesz bibliotekę przy użyciu modułów rodzimych, msnie ma ona zasięgu globalnego i dlatego nie jest dostępna w następującym znaczniku skryptu.

Wygląda na to, że powinieneś być w stanie załadować distwersję tego pliku, która została mszdefiniowana w window. Sprawdź ten przykład od autora biblioteki, aby zobaczyć przykład tego, jak można to zrobić.

Rozwiązałem ten problem, wykonując następujące czynności:

Jeśli korzystasz z modułów ECMAScript 6 z przeglądarki, użyj rozszerzenia .js w swoich plikach i dodaj znacznik skryptu type = "module".

Korzystając z modułów ECMAScript 6 ze środowiska Node.js, użyj rozszerzenia .mjsw swoich plikach i użyj tego polecenia, aby uruchomić plik:

node --experimental-modules filename.mjs

Miałem również ten sam problem, dopóki nie dodałem do skryptu type = "module". Wcześniej tak było

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

I po zmianie na

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

Działa idealnie

Błąd jest wyzwalany, ponieważ plik, do którego prowadzi łącze w pliku HTML, jest rozpakowaną wersją pliku. Aby uzyskać pełną wersję pakietu, musisz ją zainstalować z npm:

npm install --save milsymbol

Spowoduje to pobranie pełnego pakietu do Twojego node_modulesfolderu.

Następnie możesz uzyskać dostęp do samodzielnego zminimalizowanego pliku JavaScript pod adresem node_modules/milsymbol/dist/milsymbol.js

Możesz to zrobić w dowolnym katalogu, a następnie po prostu skopiować poniższy plik do swojego /srckatalogu.

Wystarczy dodać .packnazwę i rozszerzenie w <script>znaczniku w src. to znaczy:

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