JavaScript 中的模块——CommonJS 和 ESmodules（下）

最新推荐文章于 2024-10-09 00:58:21 发布

姑老爷呀

最新推荐文章于 2024-10-09 00:58:21 发布

阅读量119

点赞数

文章标签： javascript 前端 chrome

本文链接：https://blog.csdn.net/pfourfire/article/details/125040981

版权

本文探讨了JavaScript中的模块使用，包括如何在HTML中实现模块功能，以及为何在生产环境中需要模块打包工具。通过示例解释了模块打包器如Webpack的工作原理，展示了如何将多个模块文件合并成一个文件以优化性能。

摘要由CSDN通过智能技术生成

使用模块

好的，现在我们已经清楚了可用的不同类型的模块以及它们是如何工作的，让我们看看如何使用 HMTL 和 Vanilla JS 在网站中实现模块。

让我们创建一个简单的 HTML 文件，其中包含一个标题、两个按钮和一个链接到我们main.js文件的脚本标记。

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>I'm just a test...</h1>
    <button id="isAlive">Is mod1 alive?</button>
    <button id="isRolling">Is mod1 rolling?</button>
    <script src="./main.js" type="module"></script>
</body>
</html>

请注意我type="module"在脚本标签上声明的事实。我们需要这样做才能使用 JS 模块功能。如果不这样做，我们将收到如下错误：

Uncaught SyntaxError: Cannot use import statement outside a module

如果我们打开我们的 HTML 文件，我们应该得到如下内容：
截图-2

我们的main.js文件将包含以下代码：

// main.js
import { mod1Function, mod1Function2 } from './mod1.js'

const testFunction = () => console.log('Im the main function')

document.getElementById('isAlive').addEventListener('click', () => mod1Function())
document.getElementById('isRolling').addEventListener('click', () => mod1Funct