Javascript &引用；未捕获的SyntaxError:无法在模块外部使用导入语句；导入ECMAScript 6时_Javascript_Ecmascript 6_Arcgis_Arcgis Js Api

Javascript &引用；未捕获的SyntaxError:无法在模块外部使用导入语句；导入ECMAScript 6时

javascript ecmascript-6

Javascript &引用；未捕获的SyntaxError:无法在模块外部使用导入语句；导入ECMAScript 6时,javascript,ecmascript-6,arcgis,arcgis-js-api,Javascript,Ecmascript 6,Arcgis,Arcgis Js Api,我正在使用ArcGIS JSAPI 4.12，并希望使用它在地图上绘制军事符号当我向脚本添加milsymbol.js时，控制台返回错误未捕获的SyntaxError:无法在模块外部使用导入语句` 因此，我将type=“module”添加到脚本中，然后它返回未捕获引用错误：未定义ms 这是我的密码： <link rel="stylesheet" href="https://js.arcgis.com/4.12/esri/css/main.css"> <script src=

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

当我向脚本添加

milsymbol.js

时，控制台返回错误

未捕获的SyntaxError:无法在模块外部使用导入语句`

因此，我将

type=“module”

添加到脚本中，然后它返回

未捕获引用错误：未定义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>

看起来错误的原因是：

您当前正在加载

src

目录中的源文件，而不是

dist

目录中的内置文件（您可以看到预期的分布式文件是什么）。这意味着您正在未更改/未绑定状态下使用本机源代码，导致以下错误：

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

。这应该通过使用捆绑版本来解决，因为包将创建捆绑

您得到

Uncaught ReferenceError:ms未定义

错误的原因是模块的作用域是有限的，并且由于您使用本机模块加载库，

ms

不在全局作用域中，因此无法在以下脚本标记中访问

看起来您应该能够加载此文件的

dist

版本，以便在

窗口中定义ms
。请从库作者处查看如何执行此操作的示例。
我出现此错误是因为我忘记了脚本标记中的type=“module”：
<script type="module" src="milsymbol-2.0.0/src/milsymbol.js"></script>

触发该错误是因为您在HTML文件中链接到的文件是该文件的未绑定版本。
要获得完整的捆绑版本，您必须使用npm
安装：
npm install --save milsymbol

这会将整个软件包下载到您的节点\u模块
文件夹中
然后，您可以在node\u modules/milsymbol/dist/milsymbol.js

您可以在任何目录中执行此操作，然后将以下文件复制到您的/src
目录。
我通过执行以下操作解决了此问题：
从浏览器使用ECMAScript 6模块时，请在文件和脚本标记addtype=“module”
中使用.js扩展名
在Node.js环境中使用ECMAScript 6模块时，请在文件中使用扩展名.mjs
，并使用以下命令运行文件：
node --experimental-modules filename.mjs

编辑：这是在节点12是最新的LTS时编写的，这不适用于节点14 LTS。
只需在src中的
标记中的名称和扩展名之间添加.pack。
i、 e:

//代码在这里
在脚本中添加type=“module”之前，我也面临着同样的问题
以前是这样的
<script src="../src/main.js"></script>



把它改成
<script type="module" src="../src/main.js"></script>



它工作得很好。
我通过将“导入”替换为“需要”来解决我的问题
我不知道这在这里是否显得很明显。我想指出，就客户端（浏览器）JavaScript而言，您可以向外部和内部js脚本添加type=“module”

比如说，您有一个文件“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>

您也可以在内部脚本中使用它，例如：
<!DOCTYPE html><html><body>
<script type="module">
    import {a} from "./module.js";
    alert(a);
</script>
</body></html>

对我来说，这是在我将一个库（特别是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)
   ],

节点/NPM的更新
添加到您的
{
// ...
“类型”：“模块”，
// ...
}

注意：使用模块时，如果您得到参考错误：未定义require
，则需要使用，而不是。您无法在它们之间进行本机混合和匹配，因此您需要选择一个或多个。REACT中的此错误。以下步骤
转到项目根目录Package.json
文件

添加“类型”：“模块”

保存并重新启动服务器

添加发生这种情况的原因和更多可能的原因。许多接口仍然不理解ES6 Javascript语法/特性，因此无论何时在任何文件或项目中使用ES6，都需要将其编译为ES5。出现SyntaxError:cannotuse import语句超出模块的可能原因是
错误是您试图独立运行该文件，尚未安装和设置Es6编译器（如Babel），或者运行脚本中的文件路径错误/不是编译文件。如果您希望在没有编译器的情况下继续，最好的解决方案是使用ES5语法，在您的情况下，该语法是var ms=require（./ms.js）以后可以根据需要进行更新，或者更好地设置编译器，确保在运行之前编译文件/项目，并确保运行脚本正在运行编译文件（通常名为dist、build或其他名称），并且运行脚本中编译文件的路径正确。
TypeScript，React，index.html
    //conf.js:
    window.bar = "bar";
    
   //index.html 
    <script type="module" src="./conf.js"></script>
    
    //tsconfig.json
    "include": ["typings-custom/**/*.ts"]
    
    //typings-custom/typings.d.ts
    declare var bar:string;

    //App.tsx
    console.log('bar', window.bar);
    or
    console.log('bar', bar);

//conf.js:
window.bar=“bar”；
//index.html
//tsconfig.json
“包括”：[“打字自定义/***/.ts”]
//打字定制/打字d.ts
声明变量条：字符串；
//App.tsx
console.log（'bar'，window.bar）；
或
console.log（'bar'，bar）；
在我的案例中，我所做的是更新
"lib": [
      "es2020",
      "dom"
    ]

与
在我的tsconfig.json文件中
是因为您尚未导出，ts文件需要导出类格式，而在js文件中，我们将使用导出函数
因此，我们必须使用var\u name=require（“”）
来使用该文件函数。我在vanilla js上编码。如果您也这样做，只需添加一个type=“module”
import {a} from "module.js";     // this won't work

   "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)
   ],

    //conf.js:
    window.bar = "bar";
    
   //index.html 
    <script type="module" src="./conf.js"></script>
    
    //tsconfig.json
    "include": ["typings-custom/**/*.ts"]
    
    //typings-custom/typings.d.ts
    declare var bar:string;

    //App.tsx
    console.log('bar', window.bar);
    or
    console.log('bar', bar);

"lib": [
      "es2020",
      "dom"
    ]

"lib": [
  "es2016",
  "dom"
]