我正在使用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 };
我不知道这是不是很明显。我想指出的是，就客户端(浏览器)JavaScript而言，你可以将type="module"添加到外部以及内部js脚本。
比如，你有一个文件'module.js':
var a = 10;
export {a};
您可以在外部脚本中使用它，在其中执行导入操作，例如:
<!DOCTYPE html><html><body>
<script type="module" src="test.js"></script><!-- Here use type="module" rather than type="text/javascript" -->
</body></html>
. js:
import {a} from "./module.js";
alert(a);
你也可以在一个内部脚本中使用它，例如:
<!DOCTYPE html><html><body>
<script type="module">
import {a} from "./module.js";
alert(a);
</script>
</body></html>
值得一提的是，对于相对路径，您不能省略“。/"字符，即:
import {a} from "module.js"; // this won't work
对我来说，我不想更新我的包。Json文件，并将文件类型更改为mjs。
所以我四处寻找，发现在tsconfig文件中更改模块。Json会影响结果。我的ts.config文件是:
{
"compilerOptions": {
"target": "es2020",
"module": "es2020",
"lib": [
"es2020",
],
"skipLibCheck": true,
"sourceMap": true,
"outDir": "./dist",
"moduleResolution": "node",
"removeComments": true,
"noImplicitAny": true,
"strictNullChecks": true,
"strictFunctionTypes": true,
"noImplicitThis": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"resolveJsonModule": true,
"baseUrl": "."
},
"exclude": [
"node_modules"
],
"include": [
"./src/**/*.ts"
]
}
像这样，将模块从"module": "es2020"改为"module": "commonjs"解决了我的问题。
我正在使用MikroORM，并认为它可能不支持任何CommonJS以上的模块。
如果您想对模块使用import而不是require()，请更改或添加package中的type值到module。json文件
例子:
包中。json文件
{
"name": "appsample",
"version": "1.0.0",
"type": "module",
"description": "Learning Node",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Chikeluba Anusionwu",
"license": "ISC"
}
import http from 'http';
var host = '127.0.0.1',
port = 1992,
server = http.createServer();
server.on('request', (req, res) => {
res.writeHead(200, {"Content-Type": "text/plain"});
res.end("I am using type module in package.json file in this application.");
});
server.listen(port, () => console.log(
'Listening to server ${port}. Connection has been established.'));
我不得不从一个外部文件(JavaScript文件)导入一些数据，到我的script.js文件中呈现在我的HTML文件中。
文件data.js
const data = {a: 1, b: 2}
通过添加type=module，我得到了CORS错误。
我发现我可以导入文件data.js到我的script.js文件，只需包括文件data.js在我的HTML文件。
例如，以前我的HTML文件由
<script src="assets/script.js"></script>
因为我需要一些数据从文件data.js，我只是把我的HTML文件更改为:
<script src="assets/data.js"></script>
<script src="assets/script.js"></script>
也就是说，在script.js文件之前包含data.js文件，允许访问script.js文件中的数据变量。
对我来说，这是一个编译问题。我已经添加了
"devDependencies": {
...
"@babel/cli": "^7.7.5",
"@babel/core": "^7.7.5",
"@babel/node": "^7.7.4",
"@babel/plugin-proposal-class-properties": "^7.7.4",
"@babel/plugin-transform-instanceof": "^7.8.3",
"@babel/plugin-transform-runtime": "^7.7.6",
"@babel/preset-env": "^7.7.5",
"@babel/register": "^7.7.4",
"@babel/runtime": "^7.9.6"
},
"dependencies": {
...
"@babel/plugin-transform-classes": "^7.15.4"
},
增加了.babelrc文件
{
"plugins": [
"@babel/plugin-proposal-class-properties",
"@babel/plugin-transform-instanceof",
"@babel/plugin-transform-classes"
],
"presets": ["@babel/preset-env"],
"env": {
"test": {
"plugins": ["@babel/plugin-transform-runtime"]
}
}
}
