在脚本标签中不使用导入的 Javascript 库

Question

我尝试使用 typescript 创建一个库，并且我想使用一个静态方法，该方法允许我渲染一些 HTML 内容，这些内容是基于我传递给该函数的参数的 api rest 调用返回给我的，现在有一种使用架构（例如模式存储库）创建它的方法，编译它，然后像下面的代码一样使用它（当然是 js 格式）？

<div id="test"></div>

<script scr="../myLybrary.js"></script>
<script type="module">

    MyLibrary.render({
        param: "test",
        param1: "test",
        param2: "test"
    }, "test")

</script>

目前要创建这种情况，我必须在脚本中使用导入，其中对静态方法的调用以这种方式驻留：

import MyLibrary from './myLybrary.js'

有什么办法可以避免这最后一步吗？

感谢任何想帮助我的人。

Answer 1

目前要创建这种情况，我必须在脚本中使用导入，其中对静态方法的调用以这种方式驻留：

import MyLibrary from './myLybrary.js'

这通常是正确的做法。您只需删除第一个 script 标记，因为使用它您最终会加载您的库两次。所以这给我们留下了：

<div id="test"></div>

<!-- Note: No `script` tag for `myLybrary.js` here. -->
<script type="module">
    import MyLibrary from "./myLybrary.js";

    MyLibrary.render({
        param: "test",
        param1: "test",
        param2: "test"
    }, "test");

</script>

加载模块会运行模块中的顶级代码，因此如果myLybrary.js 具有加载某些资源的顶级代码，则该代码将在处理import 声明时运行。