导入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"与否，总会有错误。但是，在空间幻象的正式文档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>