“ Uncaught SyntaxError: ไม่สามารถใช้คำสั่งนำเข้านอกโมดูล” เมื่ออิมพอร์ต ECMAScript 6

ฉันกำลังใช้ ArcGIS JSAPI 4.12 และต้องการใช้Spatial Illusionsเพื่อวาดสัญลักษณ์ทางทหารบนแผนที่

เมื่อฉันเพิ่ม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"หรือไม่มีข้อผิดพลาดอยู่เสมอ อย่างไรก็ตามในเอกสารอย่างเป็นทางการของ Spatial Illusions ไม่มี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ไดเรกทอรี (คุณสามารถดูได้ว่าไฟล์ที่ตั้งใจไว้คืออะไรที่นี่ ) ซึ่งหมายความว่าคุณกำลังใช้รหัสที่มาพื้นเมืองในรัฐเปลี่ยนแปลง / unbundled Uncaught SyntaxError: Cannot use import statement outside a moduleนำไปสู่ข้อผิดพลาดต่อไปนี้: สิ่งนี้ควรได้รับการแก้ไขโดยใช้เวอร์ชันรวมเนื่องจากแพ็คเกจใช้การยกเลิกเพื่อสร้างบันเดิล

2) เหตุผลที่คุณได้รับUncaught ReferenceError: ms is not definedข้อผิดพลาดคือเนื่องจากโมดูลถูกกำหนดขอบเขตและเนื่องจากคุณกำลังโหลดไลบรารีโดยใช้โมดูลเนทิฟmsไม่ได้อยู่ในขอบเขตส่วนกลางดังนั้นจึงไม่สามารถเข้าถึงได้ในแท็กสคริปต์ต่อไปนี้

ดูเหมือนว่าคุณควรจะสามารถโหลดdistเวอร์ชันของไฟล์นี้จะมีการกำหนดไว้ในms windowลองดูตัวอย่างนี้จากผู้เขียนห้องสมุดเพื่อดูตัวอย่างของวิธีการนี้สามารถทำได้

ฉันแก้ไขปัญหานี้โดยทำสิ่งต่อไปนี้:

เมื่อใช้ ECMAScript 6 โมดูลจากเบราว์เซอร์ที่ใช้นามสกุล .js 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>