如何使用JavaScript个模块？

Question

我希望使用 javascript 中的 skypack (https://cdn.skypack.dev/) 模块进行简单处理。

我已经描述了以下脚本。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>sample</title>
</head>
<body>
    <button id="button" onclick="mybutton">click</button>
    <!-- <script type="module" src="https://cdn.skypack.dev/@...<modulename>...">// <- Uncaught ReferenceError: mybutton is not defined -->
    <script type="text/javascript" src="https://cdn.skypack.dev/@...<modulename>...">// <- Uncaught SyntaxError: export declarations may only appear at top level of a module
        import { METHOD } from "<modulename>";
        function mybutton(){
            console.log("aaa");
            // ... snip ...
        }
    </script>
</body>
</html>

但是，该模块在脚本标签中不起作用。

我试过两件事。

在脚本标签中导入。

这给了我以下错误。

Uncaught SyntaxError: export declarations may only appear at top level of a module.

导入模块时好像需要用到<script type="module"

做script type="module" .

这给出了以下错误：

Uncaught ReferenceError: mybutton is not defined.

好像没有找到下面直接定义的函数

我该怎么做才能解决这些问题？

Answer 1

我将 post 有效的代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <button id="button">click</button>
    <script type="module">
        document.getElementById('button').addEventListener('click', mybutton);
        import { METHOD } from "https://cdn.skypack.dev/.../<modulename>";
        function mybutton(){
            console.log("aaa");
            // METHOD(arg); ...
            // ... snip ...
        }
    </script>
</body>
</html>

如何使用JavaScript个模块？

How to use JavaScript modules?

html

javascript