我正在使用ArcGIS JSAPI 4.12,希望使用空间幻象在地图上绘制军事符号。

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

无法在模块外部使用import语句

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

Uncaught 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 };

当前回答

如果你想从模块中导入函数。 比方说,main。js定义了func1和func2,你想把它们导入到一个新的模块test.js中

下面将解决这个问题。

main.js:

const func1 = () => {console.log('do sth in func1')};
const func2 = () => {console.log('do sth in func2')};

//at the end of module
//export specific functions here
module.exports = { func1, func2 };

. js:

// import them here
const{ func1, func2} = require('./main.js');
func1();
func2();

其他回答

因为你没有输出。.ts文件需要导出类格式,而在.js文件中,我们将使用exports函数。

因此,我们必须使用var_name = require("<pathfile>")来使用这些文件函数。

触发此错误是因为您在HTML文件中链接到的文件是该文件的未绑定版本。 要获得完整的捆绑版本,你必须安装npm:

npm install --save milsymbol

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

然后,您可以在node_modules/milsymbol/dist/milsymbol.js中访问独立的微型JavaScript文件

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

为什么会出现这种情况以及更多可能的原因:

很多接口仍然不理解ES6 JavaScript语法/特性。因此,无论在任何文件或项目中使用ES6,都需要将ES6编译为ES5。

出现SyntaxError:不能在模块外使用import语句错误的可能原因是您试图独立运行该文件。您还没有安装和设置ES6编译器(如Babel),或者您的runscript中的文件路径是错误的/不是编译文件。

如果你想继续没有编译器,最好的解决方案是使用ES5语法,在你的情况下,这将是var ms = require(./ms.js);。这可以稍后更新为适当或更好的仍然设置你的编译器,并确保你的文件/项目在运行之前编译,也确保你的运行脚本正在运行编译文件,通常命名为dist, build或任何你命名的文件,在你的runscript中编译文件的路径是正确的。

使用这段代码。这对我来说很有效:

将这个脚本标签添加到index.html文件中:

<script type="module">
    import { ms } from "./ms.js";
    import Symbol from "./ms/symbol.js";
</script>

我通过以下方法解决了这个问题:

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

当从Node.js环境中使用ECMAScript 6模块时,在文件中使用扩展名.mjs,并使用以下命令运行文件:

node --experimental-modules filename.mjs

编辑:这是在节点12是最新的LTS时编写的,这不适用于节点14 LTS。