ECMAScript 6을 가져올 때“Uncaught SyntaxError : 모듈 외부에서 import 문을 사용할 수 없습니다”

ArcGIS JSAPI 4.12를 사용하고 있으며 Spatial Illusions 를 사용 하여 군용 심볼을 맵에 그리려고합니다.

milsymbol.js스크립트에 추가 하면 콘솔이 오류를 반환합니다

잡히지 않은 문법 오류 : 모듈 밖에서 import 문을 사용할 수 없습니다

type="module"스크립트에 추가 하면

잡히지 않은 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있습니다 (원하는 분산 파일이 무엇인지 확인할 수 있습니다 ). 이것은 변경되지 않은 / 번들되지 않은 상태에서 네이티브 소스 코드를 사용하고 있다는 것을 의미합니다 Uncaught SyntaxError: Cannot use import statement outside a module. 패키지가 롤업 을 사용하여 번들을 작성 하므로 번들 버전을 사용하여 수정해야합니다 .

2) Uncaught ReferenceError: ms is not defined오류가 발생 하는 이유 는 모듈의 범위가 지정되고 기본 모듈을 사용하여 라이브러리를로드하기 ms때문에 전역 범위에 있지 않으므로 다음 스크립트 태그에서 액세스 할 수 없기 때문입니다.

에 정의 된 dist이 파일 의 버전 을로드 할 수 있어야 ms합니다 window. 이를 수행하는 방법에 대한 예제를 보려면 라이브러리 작성자로부터이 예제 를 확인하십시오 .

다음을 수행하여이 문제를 해결했습니다.

브라우저에서 ECMAScript 6 모듈을 사용하는 경우 파일 및 스크립트 태그 add에서 .js 확장자를 사용하십시오 type = "module".

Node.js 환경에서 ECMAScript 6 모듈을 사용하는 경우 .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디렉토리로 복사하십시오 .

src .pack의 <script>태그에서 이름과 확장자 사이에 추가하십시오 . 즉 :

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