ECMAScript 6をインポートする際の「キャッチされていないSyntaxError：モジュールの外ではimportステートメントを使用できません」

私はArcGIS JSAPI 4.12を使用していますが、空間錯覚を使用して地図上に軍事シンボルを描画したいと考えています。

milsymbol.jsスクリプトに追加すると、コンソールからエラーが返されます

キャッチされていないSyntaxError：モジュールの外では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このファイルのバージョンをロードできるようです。これを行う方法の例を確認するには、ライブラリ作成者からのこの例を確認してください。mswindow

私は次のようにしてこの問題を解決しました：

ブラウザから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>