从 HTML 中导入的 js 库调用函数

问题描述

我正在使用 this 库，并尝试在我的 HTML 代码中使用它。

我创建了一个名为 g6_lib.js 的 js 文件，如下所示：

import G6 from '@antv/g6';
import { GraphLayoutPredict } from '@antv/vis-predict-engine'

然后我将这行代码添加到我的 HTML 中：

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

但是，当我尝试像这样导入库时，出现以下错误：

Uncaught SyntaxError: Cannot use import statement outside a module

基本上，我试图从他们的网站上获取这个提供的示例：

import G6 from '@antv/g6'
import { GraphLayoutPredict } from '@antv/vis-predict-engine'
const data = {
    nodes: [],edges: []
}
// predictLayout indicates the predicted layout type,such as 'force' or 'radial'
// 'confidence' is the confidence of the prediction
const { predictLayout,confidence } = await GraphLayoutPredict.predict(data);
const graph = new G6.Graph({
    ... // other configurations
    layout: {
    type: predictLayout
  }
})

我尝试将其插入到 <script></script> 标签中，但仍然无法正常工作，并且还出现控制台错误：

Uncaught SyntaxError: await is only valid in async function

对于这行代码：

const { predictLayout,confidence } = await GraphLayoutPredict.predict(data);

我对 js 编程和 Web 整体还很陌生，如果我问了一些琐碎的问题，我很抱歉，但我真的很想学习。

提供的代码示例 here 运行完美，但是，它通过称为“CDN”的东西导入库。但是，此导入并未涵盖我正在寻找的可扩展性。

如果有人能指出我做错了什么，以及如何将这些库正确导入到我的 HTML 中，我真的很感激。

谢谢

解决方法

问题的第二部分。如果您想使用 await 那么您应该创建一个 async 函数，因为 await 与 async 一起使用。像那样。 async function abc(){ const { predictLayout,confidence } = await GraphLayoutPredict.predict(data); // more code ..... } 那么它会正常工作。

html javascript libraries libraries