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

Question

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

我创建了一个名为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中，我将不胜感激。

谢谢

Answer 1

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