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

IT技术 javascript ecmascript-6 arcgis arcgis-js-api
2021-02-05 12:59:52

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

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

未捕获的语法错误：不能在module外使用导入语句`

所以我添加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 };
6个回答

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

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

更新 Node.js / NPM

添加"type": "module"到您的package.json文件中。

{
  // ...
  "type": "module",
  // ...
}

注意：当使用module时，如果你得到ReferenceError: require is not defined，你需要使用import语法而不是require. 您无法在本机之间混合和匹配它们，因此如果您需要同时使用两者，则需要选择一个或使用捆绑器。

是的。基本上，不要独立运行 TypeScript 脚本，而是将它们放在现有的 Angular 项目中，一切都会好起来的 ;-)
2021-03-25 12:59:52
你有没有找到任何解决方案@wormsparty
2021-03-27 12:59:52
@wormsparty 跳出循环
2021-03-29 12:59:52
我来自这个答案，现在我处于无限循环中
2021-04-01 12:59:52

看起来错误的原因是：

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

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

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

感谢您的回复，现在我知道我有错误的文件。我一直在寻找文件的 dist 版本，但没有结果。你知道有什么方法可以获得dist版本吗？非常感谢！
2021-03-25 12:59:52
我已经通过 npm 下载了，现在我有了 script : <script src="node_modules/milsymbol/dist/milsymbol.js"></script>，但控制台仍然返回Uncaught ReferenceError: ms is not defined. 问题ms不是在 中dist/milsymbol.js定义src/milsymbol.js，而是在 中定义，但它需要type="module"并且会导致范围问题。是否有任何解决方案。非常感谢！
2021-04-05 12:59:52
如果那是实际意图，从 /src 引用它呢？由于作者不打算公开类的属性，例如..
2021-04-06 12:59:52
它可以在 npm ( npmjs.com/package/milsymbol )上下载。或者，您可以通过克隆 repo 并运行其中一个构建脚本来自己构建它。看起来有一个 AMD 构建脚本（github.com/spatialillusions/milsymbol/blob/master/...）应该允许您require将构建的包直接放入您的代码中。
2021-04-07 12:59:52

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

以前是这样的

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

并在将其更改为

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

它工作得很好。

不，我知道 cors，问题是这些是我的本地文件
2021-03-14 12:59:52
最简单的方法：你可以使用http-server：stackoverflow.com/a/23122981/935330
2021-03-15 12:59:52
您需要在 http 服务器中提供您的脚本，浏览器使用 http 请求来加载 es6 module，服务器需要在标头中响应一个 CORS 允许您的来源。
2021-03-19 12:59:52
这意味着您正在从另一个域请求。您可以通过添加Access-Control-Allow-Origin: *标题来解决该问题。您可以在developer.mozilla.org/en-US/docs/Web/HTTP/...查看有关 CORS 的 MDN 文档。
2021-03-30 12:59:52
获取 CORS 执行此操作
2021-04-06 12:59:52

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

在浏览器中使用 ECMAScript 6 module时，请在文件中使用 .js 扩展名，并在脚本标记中添加 .js 扩展名type = "module"。

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

node --experimental-modules filename.mjs

编辑：这是在 node12 是最新的 LTS 时编写的，这不适用于 node 14 LTS。

这不再是必要的。只需将 "type": "module" 添加到您的 package.json 中，一切都会按预期工作。（使用 .js 作为文件扩展名）
2021-03-23 12:59:52
module：ECMAScript module：启用 https://nodejs.org/api/esm.html#esm_enabling
2021-03-24 12:59:52
其它你可能感兴趣的问题
上一篇在 JavaScript 中用前导零填充数字 下一篇如何将天数添加到今天的日期？