一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第16天，点击查看活动详情。

模块是当今软件设计/架构中大量使用的技术。

首先，我们将了解它们是什么以及存在的不同类型的模块。然后我们将讨论为什么模块是有用的。然后我们将看到最常用模块类型的示例和基本语法，最后我们将讨论捆绑、为什么需要以及如何做。

什么是模块以及它们为什么有用

模块只是文件中的一段代码，您可以从其他文件中调用和使用它。模块化设计与将所有项目代码放在一个文件中相反。

在开发一个大项目时，将我们的代码分成模块非常有用，原因如下：

它有利于将关注点和功能划分到不同的文件中，这有助于代码的可视化和组织。
当代码组织清晰时，代码往往更容易维护，并且不易出错和错误。
模块可以很容易地在我们项目的不同文件和部分中使用和重用，而无需再次重写相同的代码。

与其将程序的所有组件都放在一个文件中，我们可以将其划分为部分或模块，并让它们中的每一个负责一个功能/关注点。

如果这个概念现在还不够清楚，请不要担心。我们将在几秒钟内看到一些示例。

模块类型

与生活中的几乎所有事物一样，尤其是在 JavaScript 中，我们有很多方法可以实现模块。

由于 JavaScript 最初被创建为只是一种用于网站的小型脚本语言，因此一开始并不支持像模块这样的大型项目的功能。

但随着语言和生态系统的发展，开发人员开始看到对这个功能的需求。因此开发了不同的选项和库来将此功能添加到 JavaScript。

在众多可用的模块中，我们只看一下 CommonJS 和 ESmodules，它们是最新的和广泛使用的模块。

旁注：您知道Javascript 最初是在 10 天的工作中创建的吗？

在分析JavaScript的复杂性并了解语言的发展方式时，我认为必须记住语言最初创造的语言是非常重要的，以做它现在做的事情。这是JavaScript生态系统的增长，推动了许多已经发生的变化。

CommonJS 模块

CommonJs是用于在JavaScript上实现模块的一组标准。该项目于2009年由Mozilla Engineer Kevin Dangoor启动。

CommonJS主要用于具有节点的服务器端JS应用程序，因为浏览器不支持CommonJs的使用。

作为侧面评论，用于仅支持CommonJ的节点来实现模块，但是现在它还支持更现代方法的ESModules。

让我们看看如何CommonJS的看起来实际代码。

要实现模块，您首先需要在计算机上安装一个 Node 应用程序。所以通过运行创建一个npm init -y。

首先让我们创建一个main.js包含一个简单函数的文件。

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

testFunction()

好的，现在假设我们想要从我们的主文件中调用另一个函数，但我们不希望该函数包含在其中，因为它不是我们核心功能的一部分。为此，让我们创建一个mod1.js文件并将以下代码添加到其中：

const mod1Function = () => console.log('Mod1 is alive!')
module.exports = mod1Function

module.exports是我们用来声明我们要从该文件导出的所有内容的关键字。

要在我们的文件中使用这个函数main.js，我们可以这样做：

mod1Function = require('./mod1.js')

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

testFunction()

看到我们声明了我们想要使用的任何东西，然后将它分配给require我们想要使用的文件。小菜一碟。;)

如果我们想从一个模块中导出多个东西，我们可以这样做：

const mod1Function = () => console.log('Mod1 is alive!')
const mod1Function2 = () => console.log('Mod1 is rolling, baby!')

module.exports = { mod1Function, mod1Function2 }

在 main.js 文件中，我们可以像这样使用这两个函数：

({ mod1Function, mod1Function2 } = require('./mod1.js'))

const testFunction = () => {
    console.log('Im the main function')
    mod1Function()
    mod1Function2()
}

testFunction()

差不多就是这样。很简单，对吧？它很简单，但它是一个强大的工具。=)

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

什么是模块以及它们为什么有用

模块类型

CommonJS 模块