Cú pháp Uncaught SyntaxError: Không thể sử dụng câu lệnh nhập bên ngoài mô-đun, khi nhập ECMAScript 6

Tôi đang sử dụng ArcGIS JSAPI 4.12 và muốn sử dụng Ảo ảnh không gian để vẽ các biểu tượng quân sự trên bản đồ.

Khi tôi thêm milsymbol.jsvào tập lệnh, giao diện điều khiển trả về lỗi

Uncaught SyntaxError: Không thể sử dụng câu lệnh nhập bên ngoài mô-đun`

Vì vậy, tôi thêm type="module"vào kịch bản, và sau đó nó trở lại

Uncaught ReferenceError: ms không được xác định

Đây là mã của tôi:

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

Vì vậy, cho dù tôi thêm type="module"hay không, luôn có lỗi. Tuy nhiên, trong tài liệu chính thức của Spatial Illusions, không có bất kỳ type="module"kịch bản nào. Bây giờ tôi thực sự bối rối. Làm thế nào để họ quản lý để làm cho nó hoạt động mà không cần thêm loại?

Tệp milsymbol.js

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

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

export { ms };

Tôi đã gặp lỗi này vì tôi quên kiểu = "mô-đun" bên trong thẻ script:

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

Có vẻ như nguyên nhân của các lỗi là:

1) Bạn hiện đang tải tệp nguồn trong srcthư mục thay vì tệp được xây dựng trong distthư mục (bạn có thể xem tệp phân phối dự định ở đây là gì ). Điều này có nghĩa là bạn đang sử dụng mã nguồn gốc ở trạng thái không thay đổi / không được xử lý, dẫn đến lỗi sau : Uncaught SyntaxError: Cannot use import statement outside a module. Điều này cần được khắc phục bằng cách sử dụng phiên bản đi kèm vì gói đang sử dụng rollup để tạo gói.

2) Lý do bạn gặp Uncaught ReferenceError: ms is not definedlỗi là do các mô-đun nằm trong phạm vi và vì bạn đang tải thư viện bằng các mô-đun gốc, mskhông nằm trong phạm vi toàn cầu và do đó không thể truy cập được trong thẻ script sau.

Có vẻ như bạn sẽ có thể tải distphiên bản của tệp này đã msđược xác định trên window. Kiểm tra ví dụ này từ tác giả thư viện để xem một ví dụ về cách thực hiện việc này.

Tôi đã giải quyết vấn đề này bằng cách làm như sau:

Khi sử dụng các mô-đun ECMAScript 6 từ trình duyệt, hãy sử dụng phần mở rộng .js trong tệp của bạn và trong thẻ tập lệnh thêm type = "module".

Khi sử dụng các mô-đun ECMAScript 6 từ môi trường Node.js, hãy sử dụng tiện ích mở rộng .mjstrong các tệp của bạn và sử dụng lệnh này để chạy tệp:

node --experimental-modules filename.mjs

Tôi cũng đã đối mặt với vấn đề tương tự cho đến khi tôi thêm kiểu = "mô-đun" vào tập lệnh. Trước khi nó như thế này

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

Và sau khi đổi nó thành

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

Nó hoạt động hoàn hảo

Lỗi được kích hoạt do tệp bạn liên kết đến trong tệp HTML của bạn là phiên bản chưa được xử lý của tệp. Để có được phiên bản đóng gói đầy đủ, bạn sẽ phải cài đặt nó với npm:

npm install --save milsymbol

Điều này tải gói đầy đủ vào node_modulesthư mục của bạn .

Sau đó, bạn có thể truy cập tệp JavaScript rút gọn độc lập tại node_modules/milsymbol/dist/milsymbol.js

Bạn có thể làm điều này trong bất kỳ thư mục nào, và sau đó chỉ cần sao chép tệp dưới đây vào /srcthư mục của bạn .

Chỉ cần thêm .packgiữa tên và phần mở rộng trong <script>thẻ trong src. I E:

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