Javascript 导入 ECMAScript 6 时出现“未捕获的语法错误：无法在模块外使用导入语句”

"Uncaught SyntaxError: Cannot use import statement outside a module" when importing ECMAScript 6

提问by Jerry Chen

I'm using ArcGIS JSAPI 4.12 and wish to use Spatial Illusionsto draw military symbols on a map.

我正在使用 ArcGIS JSAPI 4.12 并希望使用Spatial Illusions在地图上绘制军事符号。

When I add milsymbol.jsto the script, the console returns error

当我添加milsymbol.js到脚本时，控制台返回错误

Uncaught SyntaxError: Cannot use import statement outside a module`

未捕获的语法错误：不能在模块外使用 import 语句`

so I add type="module"to the script, and then it returns

所以我添加type="module"到脚本中，然后它返回

Uncaught ReferenceError: ms is not defined

未捕获的 ReferenceError: ms 未定义

Here's my code:

这是我的代码：

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

So, whether I add type="module"or not, there are always errors. However, in the official document of Spatial Illusions, there isn't any type="module"in the script. I'm now really confused. How do they manage to get it work without adding the type?

所以，不管我加type="module"不加，总是有错误。但是，在Spatial Illusions的官方文档type="module"中，脚本中没有任何内容。我现在真的很困惑。他们如何在不添加类型的情况下使其工作？

File milsymbol.js

文件milsymbol.js

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

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

export { ms };

回答by Emmanuel

I got this error because I forgot the type="module" inside the script tag:

我收到此错误是因为我忘记了脚本标记中的 type="module"：

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

回答by Kai

It looks like the cause of the errors are:

看起来错误的原因是：

1) You're currently loading the source file in the srcdirectory instead of the built file in the distdirectory (you can see what the intended distributed file is here). This means that you're using the native source code in an unaltered/unbundled state, leading to the following error: Uncaught SyntaxError: Cannot use import statement outside a module. This should be fixed by using the bundled version since the package is using rollupto create a bundle.

1) 您当前正在src目录中加载源文件而不是目录中的构建文件dist（您可以在此处查看预期的分发文件）。这意味着您在未更改/未捆绑状态下使用本机源代码，从而导致以下错误：Uncaught SyntaxError: Cannot use import statement outside a module. 这应该通过使用捆绑版本来解决，因为包使用汇总来创建捆绑包。

2) The reason you're getting the Uncaught ReferenceError: ms is not definederror is because modules are scoped, and since you're loading the library using native modules, msis not in the global scope and is therefore not accessible in the following script tag.

2）您收到Uncaught ReferenceError: ms is not defined错误的原因是因为模块是有范围的，并且由于您使用本机模块加载库，ms因此不在全局范围内，因此无法在以下脚本标记中访问。

It looks like you should be able to load the distversion of this file to have msdefined on the window. Check out this examplefrom the library author to see an example of how this can be done.

看起来您应该能够加载dist此文件的版本以ms在window. 看看这个例子从库中笔者看到如何可以做到这一点的例子。

回答by Desire Kaleba

I was also facing the same issue until i added the type="module" to the script. Before it was like this

在我将 type="module" 添加到脚本之前，我也面临着同样的问题。以前是这样的

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

And after changing it to

并在将其更改为

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

It worked perfectly

它工作得很好

回答by Anurag Phadnis

I solved this issue by doing the following:

我通过执行以下操作解决了这个问题：

When using ECMAScript 6 modules from the browser, use the .js extension in your files and in the script tag add type = "module".

在浏览器中使用 ECMAScript 6 模块时，请在您的文件和脚本标记中使用 .js 扩展名 add type = "module"。

When using ECMAScript 6 modules from a Node.js environment, use the extension .mjsin your files and use this command to run the file:

在 Node.js 环境中使用 ECMAScript 6 模块时，请使用.mjs文件中的扩展名并使用以下命令运行文件：

node --experimental-modules filename.mjs

回答by rootr

The error is triggered because the file you're linking to in your HTML file is the unbundled version of the file. To get the full bundled version you'll have to install it with npm:

触发该错误是因为您在 HTML 文件中链接到的文件是该文件的非捆绑版本。要获得完整的捆绑版本，您必须使用以下命令安装它npm：

npm install --save milsymbol

This downloads the full package to your node_modulesfolder.

这会将完整包下载到您的node_modules文件夹中。

You can then access the standalone minified JavaScript file at node_modules/milsymbol/dist/milsymbol.js

然后，您可以在以下位置访问独立的缩小的 JavaScript 文件 node_modules/milsymbol/dist/milsymbol.js

You can do this in any directory, and then just copy the below file to your /srcdirectory.

您可以在任何目录中执行此操作，然后只需将以下文件复制到您的/src目录中即可。

回答by Devesh Shirsath

Just add .packbetween the name and the extension in the <script>tag in src. i.e.:

只需在 src 标签中.pack的名称和扩展名之间添加<script>。IE：

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

回答by nik s

I resolved my case by replacing "import" by "require".

我通过用“require”替换“import”解决了我的问题。

// import { parse } from 'node-html-parser';
parse = require('node-html-parser');