+
95
-

回答

要在HTML文档中通过<script>标签引入JavaScript模块并使用import语句,你需要确保以下几点:

使用type="module"属性引入模块。确保模块文件的路径正确。在模块文件中正确使用export和import语句。

下面是一个完整的示例,演示如何实现这一过程。

示例创建一个JavaScript模块文件

创建一个名为module.js的文件,并在其中定义一个导出的函数:

// module.js
export function greet(name) {
    return `Hello, ${name}!`;
}
创建HTML文件

在HTML文件中,通过<script>标签引入模块,并使用import语句调用模块中的方法:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Import Module Example</title>
</head>
<body>
    <h1>Check the console for the greeting message</h1>
    <script type="module">
        import { greet } from './module.js';

        console.log(greet('World'));
    </script>
</body>
</html>
解释

module.js:

定义了一个名为greet的函数,并使用export关键字导出这个函数。

HTML 文件:

使用<script type="module">标签引入JavaScript模块。在这个模块脚本中,使用import { greet } from './module.js';语句从module.js中导入greet函数。调用导入的greet函数并在控制台中打印结果。注意事项

文件路径

确保module.js文件的路径相对于HTML文件是正确的。如果module.js在同一目录下,则使用'./module.js'。

Web服务器

某些浏览器(如Chrome)在本地文件系统上直接打开HTML文件时不允许加载模块文件。因此,建议使用一个简单的HTTP服务器(如http-server、live-server或其他)来运行你的HTML文件。

使用http-server的示例:

首先安装http-server:
npm install -g http-server
在包含HTML和JS文件的目录下运行http-server:
http-server
打开浏览器并访问http://localhost:8080(或http-server显示的端口)。

网友回复

我知道答案,我要回答