我正在使用 ArcGIS JSAPI 4.12 并希望使用 Spatial Illusions 在地图上绘制军事符号。
当我将 milsymbol.js
添加到脚本时,控制台返回错误
未捕获的语法错误:无法在模块外使用导入语句`
所以我将 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 };
require()
包含任何模块。看看这个video
npm install node-fetch@2.0
为例,因为 TF 为什么要用 3.0 版本破坏 API。永远不要破坏模块化组件的 API,扩展它,或者什么都不做,谢谢。
我收到此错误是因为我忘记了脚本标记中的 type="module"
:
<script type="module" src="milsymbol-2.0.0/src/milsymbol.js"></script>
更新 Node.js / NPM
将 "type": "module"
添加到您的 package.json
文件中。
{
// ...
"type": "module",
// ...
}
注意:使用模块时,如果您获得 ReferenceError: require is not defined
,则需要使用 import
syntax 而不是 require
。您无法在它们之间进行原生混合和匹配,因此您需要选择一个或 use a bundler if you need to use both。
看起来错误的原因是:
您当前正在 src 目录中加载源文件,而不是 dist 目录中的构建文件(您可以在此处查看预期的分发文件)。这意味着您在未更改/未捆绑状态下使用本机源代码,导致以下错误:未捕获的语法错误:无法在模块外使用 import 语句。这应该通过使用捆绑版本来解决,因为包使用汇总来创建捆绑包。您收到 Uncaught ReferenceError: ms is not defined 错误的原因是因为模块是作用域的,并且由于您使用本机模块加载库,因此 ms 不在全局范围内,因此无法在以下脚本标记中访问.
看起来您应该能够加载此文件的 dist
版本以在 window
上定义 ms
。查看库作者的 this example 以查看如何完成此操作的示例。
require
放入您的代码中。
<script src="node_modules/milsymbol/dist/milsymbol.js"></script>
,但控制台仍然返回 Uncaught ReferenceError: ms is not defined
。问题是 ms
没有在 dist/milsymbol.js
中定义,它在 src/milsymbol.js
中定义,但它需要 type="module"
并且会导致范围问题。有什么解决方案。非常感谢!
我通过用“require”替换“import”解决了我的问题。
// import { parse } from 'node-html-parser';
const parse = require('node-html-parser');
const {parse} = require('node-html-parser');
为我工作
在我将 type="module" 添加到脚本之前,我也面临同样的问题。
之前是这样的
<script src="../src/main.js"></script>
并将其更改为
<script type="module" src="../src/main.js"></script>
它工作得很好。
Access-Control-Allow-Origin: *
来解决此问题。您可以在 developer.mozilla.org/en-US/docs/Web/HTTP/… 查看有关 CORS 的 MDN 文档。
我通过执行以下操作解决了这个问题:
在浏览器中使用 ECMAScript 6 模块时,请在文件中使用 .js 扩展名,并在脚本标记中添加 type = "module"
。
在 Node.js 环境中使用 ECMAScript 6 模块时,在文件中使用扩展名 .mjs
并使用以下命令运行文件:
node --experimental-modules filename.mjs
编辑:这是在 node12 是最新的 LTS 时编写的,这不适用于 node 14 LTS。
https://nodejs.org/api/esm.html#esm_enabling
.cjs
文件。
我不知道这在这里是否很明显。我想指出,就客户端(浏览器)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
有三种方法可以解决这个问题:
<强> 1。第一个:在脚本中,包含 type=module
<script type="module" src="milsymbol-2.0.0/src/milsymbol.js"></script>
<强> 2。第二个:在 node.js 中,进入您的 package.json
文件
{
// ...
"type": "module",
// ...
}
3.第三种:将import替换为required
尝试这个
import { parse } from 'node-html-parser';
parse = require('node-html-parser');
否则试试这个
//import { parse } from 'node-html-parser';
parse = require('node-html-parser');
对我来说,这是由于没有将库(特别是 typeORM
,使用 ormconfig.js
文件,在 entities
键下)引用到 src
文件夹,而不是 dist
文件夹...
"entities": [
"src/db/entity/**/*.ts", // Pay attention to "src" and "ts" (this is wrong)
],
代替
"entities": [
"dist/db/entity/**/*.js", // Pay attention to "dist" and "js" (this is the correct way)
],
如果您想对模块使用 import 而不是 require(),请在 package.json
文件中将 type
的值更改或添加到 module
例子:
包.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.'));
将“type”:“module”添加到您的 package.json 文件中。
并重新启动您的应用程序:
npm start
然后你的问题就解决了。
我正在使用香草 JavaScript 进行编码。如果您也这样做,只需将 type="module" 添加到您的脚本标签。
也就是之前的代码:
<script src="./index.js"></script>
更新代码:
<script type="module" src="./index.js"></script>`
对我来说,这有帮助:
在我使用的 .ts 文件中: import prompts from "prompts";并在文件 tsconfig.json 中使用了 "module": "commonjs"
为什么会发生这种情况以及更多可能的原因:
许多接口仍然不理解 ES6 JavaScript 语法/功能。因此,无论何时在任何文件或项目中使用 ES6,都需要将其编译为 ES5。
SyntaxError: Cannot use import statement outside a module
错误的可能原因是您尝试独立运行文件。您尚未安装和设置 ES6 编译器,例如 Babel,或者您的 runscript 中的文件路径错误/不是编译文件。
如果您想在没有编译器的情况下继续,最好的解决方案是使用 ES5 语法,在您的情况下是 var ms = require(./ms.js);
。这可以稍后根据需要进行更新,或者更好地设置您的编译器,并确保您的文件/项目在运行之前进行编译,并确保您的运行脚本正在运行通常命名为 dist、build 或任何您命名它的编译文件以及指向你的runscript中编译的文件是正确的。
触发错误是因为您在 HTML 文件中链接到的文件是该文件的未捆绑版本。要获得完整的捆绑版本,您必须使用 npm
安装它:
npm install --save milsymbol
这会将完整包下载到您的 node_modules
文件夹。
然后,您可以在 node_modules/milsymbol/dist/milsymbol.js
访问独立的缩小 JavaScript 文件
您可以在任何目录中执行此操作,然后只需将以下文件复制到您的 /src
目录。
使用此代码。它对我很有效:
将此脚本标记添加到文件 index.html:
<script type="module">
import { ms } from "./ms.js";
import Symbol from "./ms/symbol.js";
</script>
我在尝试使用 import Express.js 时遇到了这个错误。
而不是 import express from 'express';
我用过 const express = require('express');
就我而言,我更新了
"lib": [
"es2020",
"dom"
]
和
"lib": [
"es2016",
"dom"
]
在我的 tsconfig.json 文件中。
EXPO 我也遇到了同样的错误。
主要解决方法是在 package.json 文件中添加 "type": "module",
。
https://i.stack.imgur.com/zTZGn.png
https://i.stack.imgur.com/JkStc.png
但是,您必须检查哪个是正确的 package.json。
就我而言,有两个 package.json 文件,那么您应该将其添加到服务器文件中。
要确定哪个是正确的 package.json,请查找 "scripts": { "test": "echo \"Error: no test specified\" && exit 1" },
在 ↑ 此行下方,添加 "type": "module",
我必须将一些数据从外部文件(js 文件)导入到我的 html 文件中的 script.js 中。
数据.js
const data = {a: 1, b: 2}
通过添加 type=module
我得到 cors
错误。
我发现只需在我的 html 文件中包含 data.js
就可以将 data.js
导入到我的 script.js
中。
例如,以前我的 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
中的数据变量
script.js
中使用 data.js
? script.js
不包含导入语句?
script.js
文件中没有导入语句。例如。 data.js
可以有 const data_js_variable = 1
,我们可以在 script.js
中使用这个变量,而不需要任何 import 语句。我们只需要将 js 文件按顺序包含在我们的 html 文件中,例如<script src="assets/data.js"></script> <script src="assets/script.js"></script>
好吧,就我而言,我不想更新我的 package.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 以上的任何模块。
那是因为你还没有导出。 .ts 文件需要导出类格式,而在 .js 文件中我们将使用 exports
函数。
因此,我们必须使用 var_name = require("<pathfile>")
来使用这些文件功能。
提供的答案都不适合我,但我找到了不同的解决方案:How to enable ECMAScript 6 imports in Node.js
安装 ESM:
npm install --save esm
使用 ESM 运行:
node -r esm server.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"]
}
}
}
只需在 src
的 <script>
标记中的名称和扩展名之间添加 .pack
。
IE:
<script src="name.pack.js">
// Code here
</script>
当它在 Babel 转译中失败时会发生此错误。
不定期副业成功案例分享