“Uncaught SyntaxError: Tidak dapat menggunakan pernyataan impor di luar modul” ketika mengimpor ECMAScript 6

Saya menggunakan ArcGIS JSAPI 4.12 dan ingin menggunakan Spatial Illusions untuk menggambar simbol militer di peta.

Ketika saya menambahkan milsymbol.jske skrip, konsol mengembalikan kesalahan

Uncaught SyntaxError: Tidak dapat menggunakan pernyataan impor di luar modul`

jadi saya tambahkan type="module"ke skrip, dan kemudian kembali

ReferenceError yang tidak tertangkap: ms tidak ditentukan

Ini kode saya:

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

Jadi, apakah saya menambah type="module"atau tidak, selalu ada kesalahan. Namun, dalam dokumen resmi Spatial Illusions, tidak ada type="module"dalam skrip ini. Saya sekarang benar-benar bingung. Bagaimana cara mereka membuatnya berfungsi tanpa menambahkan tipe?

File milsymbol.js

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

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

export { ms };

Saya mendapatkan kesalahan ini karena saya lupa type = "module" di dalam tag script:

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

Sepertinya penyebab kesalahan adalah:

1) Saat ini Anda sedang memuat file sumber di srcdirektori alih-alih file yang dibangun di distdirektori (Anda dapat melihat apa file yang dimaksud didistribusikan di sini ). Ini berarti bahwa Anda menggunakan kode sumber asli dalam / negara tidak mengikat berubah, mengarah ke kesalahan berikut: Uncaught SyntaxError: Cannot use import statement outside a module. Ini harus diperbaiki dengan menggunakan versi paket karena paket menggunakan rollup untuk membuat bundel.

2) Alasan Anda mendapatkan Uncaught ReferenceError: ms is not definedkesalahan adalah karena modul dicakup, dan karena Anda memuat pustaka menggunakan modul asli, mstidak berada dalam lingkup global dan karenanya tidak dapat diakses dalam tag skrip berikut.

Sepertinya Anda harus dapat memuat distversi file ini untuk msdidefinisikan pada window. Lihat contoh ini dari penulis perpustakaan untuk melihat contoh bagaimana ini bisa dilakukan.

Saya memecahkan masalah ini dengan melakukan hal berikut:

Saat menggunakan modul ECMAScript 6 dari browser, gunakan ekstensi .js di file Anda dan pada tag tambahan type = "module".

Saat menggunakan modul ECMAScript 6 dari lingkungan Node.js, gunakan ekstensi .mjsdalam file Anda dan gunakan perintah ini untuk menjalankan file:

node --experimental-modules filename.mjs

Saya juga menghadapi masalah yang sama sampai saya menambahkan type = "module" ke skrip. Sebelumnya seperti ini

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

Dan setelah mengubahnya menjadi

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

Itu bekerja dengan sempurna

Kesalahan dipicu karena file yang Anda tautkan dalam file HTML Anda adalah versi file yang tidak diikat. Untuk mendapatkan versi paket lengkap Anda harus menginstalnya dengan npm:

npm install --save milsymbol

Ini mengunduh paket lengkap ke node_modulesfolder Anda .

Anda kemudian dapat mengakses file JavaScript yang diperkecil mandiri di node_modules/milsymbol/dist/milsymbol.js

Anda dapat melakukan ini di direktori mana saja, dan kemudian cukup salin file di bawah ini ke /srcdirektori Anda .

Cukup tambahkan .packantara nama dan ekstensi di <script>tag di src. yaitu:

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