"Uncaught SyntaxError: impossibile utilizzare l'istruzione import all'esterno di un modulo" durante l'importazione di ECMAScript 6

Sto usando ArcGIS JSAPI 4.12 e desidero usare Spatial Illusions per disegnare simboli militari su una mappa.

Quando aggiungo milsymbol.jsallo script, la console restituisce un errore

Uncaught SyntaxError: Impossibile usare l'istruzione import all'esterno di un modulo`

quindi aggiungo type="module"allo script e poi ritorna

Errore di riferimento non rilevato: ms non definito

Ecco il mio codice:

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

Quindi, che io aggiunga type="module"o no, ci sono sempre errori. Tuttavia, nel documento ufficiale di Spatial Illusions, non c'è nessuno type="module"nella sceneggiatura. Ora sono davvero confuso. Come riescono a farlo funzionare senza aggiungere il tipo?

File milsymbol.js

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

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

export { ms };

Ho ricevuto questo errore perché ho dimenticato il type = "module" all'interno del tag script:

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

Sembra che la causa degli errori sia:

1) Attualmente stai caricando il file sorgente nella srcdirectory anziché il file creato nella distdirectory (puoi vedere qual è il file distribuito previsto qui ). Ciò significa che si sta utilizzando il codice sorgente nativo in uno stato naturale / disaggregato, che portano alla seguente errore: Uncaught SyntaxError: Cannot use import statement outside a module. Ciò dovrebbe essere risolto utilizzando la versione in bundle poiché il pacchetto utilizza il rollup per creare un bundle.

2) Il motivo per cui viene visualizzato l' Uncaught ReferenceError: ms is not definederrore è perché i moduli sono nell'ambito e, poiché si sta caricando la libreria utilizzando moduli nativi, msnon rientra nell'ambito globale e non è quindi accessibile nel seguente tag di script.

Sembra che dovresti essere in grado di caricare la distversione di questo file da msdefinire sul file window. Dai un'occhiata a questo esempio dall'autore della biblioteca per vedere un esempio di come farlo.

Ho risolto questo problema nel modo seguente:

Quando si utilizzano i moduli ECMAScript 6 dal browser, utilizzare l'estensione .js nei file e nel tag script aggiungi type = "module".

Quando si utilizzano moduli ECMAScript 6 da un ambiente Node.js, utilizzare l'estensione .mjsnei file e utilizzare questo comando per eseguire il file:

node --experimental-modules filename.mjs

Stavo anche affrontando lo stesso problema fino a quando non ho aggiunto il tipo = "modulo" allo script. Prima era così

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

E dopo averlo cambiato in

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

Ha funzionato perfettamente

L'errore viene attivato perché il file a cui ti stai collegando nel tuo file HTML è la versione non raggruppata del file. Per ottenere la versione completa in bundle dovrai installarla con npm:

npm install --save milsymbol

Questo scarica il pacchetto completo nella tua node_modulescartella.

È quindi possibile accedere al file JavaScript minimizzato autonomo all'indirizzo node_modules/milsymbol/dist/milsymbol.js

Puoi farlo in qualsiasi directory, quindi copia il file qui sotto nella tua /srcdirectory.

Basta aggiungere .packtra il nome e l'estensione nel <script>tag in src. vale a dire:

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