Node.js之模块化

我就是我 2024-03-23 14:31 71阅读 0赞

**目录**

1. 模块化的基本概念

2. Node.js 中的模块化

2.1 Node.js 中模块的分类

2.2 加载模块

2.3 Node.js 中的模块作用域

2.4 向外共享模块作用域中的成员

2.5 Node.js 中的模块化规范

3. npm与包

3.1 包

3.2 npm 初体验

3.3 包管理配置文件

3.4 解决下包速度慢的问题

3.6 规范的包结构

4. 模块的加载机制

4.1 优先从缓存中加载

4.2 内置模块的加载机制

4.3 自定义模块的加载机制

4.4 第三方模块的加载机制

4.5 目录作为模块

--------------------

### **1. 模块化的基本概念** ###

**模块化** 是指解决一个 复杂问题 时，自顶向下逐层 把系统划分成若干模块的过程 。对于整个系统来说， 模块是可组合、分解和更换的单元 。

编程领域中的模块化，就是 **遵守固定的规则** ，把一个 大文件 拆成 独立并互相依赖 的 多个小模块 。 把代码进行模块化拆分的好处：

① 提高了代码的 复用性

② 提高了代码的 可维护性

③ 可以实现 按需加载

### **2. Node.js 中的模块化** ###

#### **2.1 Node.js 中模块的分类** ####

Node.js 中根据模块来源的不同，将模块分为了 3 大类，分别是：

*  内置模块（内置模块是由 Node.js 官方提供的，例如 fs、path、http 等） 
 *  自定义模块（用户创建的每个 .js 文件，都是自定义模块） 
 *  第三方模块（由第三方开发出来的模块，并非官方提供的内置模块，也不是用户创建的自定义模块，使用前需要先下载)

#### **2.2** **加载****模块**  ####

使用强大的  require()  方法，可以加载需要的 内置模块 、 用户自定义模块 、 第三方模块 进行使用。例如：

![92f621814d104a508378235458beab57.png][]

> 注意 ：使用 require() 方法加载其它模块时，会执行被加载模块中的代码。

#### **2.3 Node.js 中的模块作用域** ####

> **1. 什么是** **模块作用域**

和 函数作用域 类似，在自定义模块中定义的 变量 、 方法 等成员， 只能在当前模块内被访问 ，这种 模块级别的访问限制 ，叫做 **模块** **作用域** 。

![b46b521329f245d6ada4ed5fbdb74af4.png][]

> **2. 模块作用域的** **好处**

防止了全局变量污染的问题

![c6f5938dd6b546dca99e8b70ae01de90.png][]

#### **2.4 向外共享模块作用域中的成员** ####

> **1.**  **module**  **对象**

在每个 .js 自定义模块中都有一个 module 对象，它里面 存储了和当前模块有关的信息 ，打印如下：

![411d55c2d2b24360bbcb6187725dd9b8.png][]

> **2.**  **module.exports**  **对象**

在自定义模块中，可以使用 module.exports 对象，将模块内的成员共享出去，供外界使用。

外界用  require() 方法 导入自定义模块时，得到的就是 module.exports 所指向的对象。

> **3. 共享成员时的** **注意点**

使用 require() 方法导入模块时，导入的结果， **永远以 module.exports 指向的对象为准** 。

![f9f69046bd6c4f2baf10899c4e5d938b.png][]

> **4.**  **exports 对象**

由于 module.exports 单词写起来比较复杂，为了简化向外共享成员的代码，Node 提供了  exports  对象。 默认情况 下 ， exports 和 module.exports 指向同一个对象 。最终共享的结果，还是以module.exports 指向的对象为准。

![c3e0977fcf6a41e1a957250b5ce6ab05.png][]

> **4. exports 和 module.exports 的使用误区**

时刻谨记，require() 模块时，得到的永远是  module.exports  指向的对象：

![3dd75f2f78334c059d0613594f6e5aa9.png][]

> **注意：**为了防止混乱，建议大家不要在同一个模块中同时使用 exports 和 module.exports

#### **2.5 Node.js 中的模块化规范**  ####

Node.js 遵循了 CommonJS 模块化规范，CommonJS 规定了 模块的特性 和 各模块之间如何相互依赖 。

CommonJS 规定：

① 每个模块内部， module 变量 代表当前模块。

② module 变量是一个对象，它的 exports 属性（即  module.exports ） 是对外的接口 。

③ 加载某个模块，其实是加载该模块的 module.exports 属性。 require() 方法用于加载模块 。

### **3. npm与包**  ###

#### **3.1 包**  ####

**1. 什么是包**

Node.js 中的 第三方模块 又叫做 包 。

就像 电脑 和 计算机 指的是相同的东西， 第三方模块 和 包 指的是同一个概念，只不过叫法不同。

**2. 包的来源**

不同于 Node.js 中的内置模块与自定义模块， 包是由第三方个人或团队开发出来的 ，免费供所有人使用。

**注意** ：Node.js 中的包都是免费且开源的，不需要付费即可免费下载使用。

**3. 为什么需要包**

由于 Node.js 的内置模块仅提供了一些底层的 API，导致在基于内置模块进行项目开发的时，效率很低。

包是基于内置模块封装出来的 ，提供了更高级、更方便的 API， 极大的提高了开发效率 。

包 和 内置模块 之间的关系，类似于  jQuery  和  浏览器内置 API  之间的关系。

**4. 从哪里下载包**

国外有一家 IT 公司，叫做  **npm, Inc.**  这家公司旗下有一个非常著名的网站：  https://www.npmjs.com/  ，它是 **全球最**  **大的包共享平台** ，你可以从这个网站上搜索到任何你需要的包，只要你有足够的耐心！ 到目前位置，全球约  1100 多万 的开发人员，通过这个包共享平台，开发并共享了超过  120 多万个包  供我们使用。

**npm, Inc. 公司** 提供了一个地址为  https://registry.npmjs.org/  的服务器，来对外共享所有的包，我们可以从这个服务

器上下载自己所需要的包。

**注意：**

*  从 https://www.npmjs.com/ 网站上搜索自己所需要的包 
 *  从 https://registry.npmjs.org/ 服务器上下载自己需要的包

**5. 如何下载包**

**npm, Inc. 公司** 提供了一个包管理工具，我们可以使用这个包管理工具，从  https://registry.npmjs.org/  服务器把需要 的包下载到本地使用。

这个包管理工具的名字叫做  Node Package Manager （简称  npm 包管理工具 ），这个包管理工具随着 Node.js 的安装包一起被安装到了用户的电脑上。

可以在终端中执行  **npm -v**  命令，来查看自己电脑上所安装的 npm 包管理工具的版本号：

![fa6e6d7b231e4179b8f9dc980c561763.png][]

#### **3.2 npm 初体验**  ####

**1. 格式化时间的传统做法**

![2225f4b4a1dc4b00996b802fc0d956d6.png][]

**2. 格式化时间的高级做法**

① 使用 npm 包管理工具，在项目中安装格式化时间的包 moment

② 使用 require() 导入格式化时间的包

③ 参考 moment 的官方 API 文档对时间进行格式化

![e454ea3033454c94ae982fbb0f26b7d9.png][]

**3. 在项目中安装包的命令**

如果想在项目中安装指定名称的包，需要运行如下的命令：

![60509039fa0e4ec5855d70f9323fec5b.png][]

上述的装包命令，可以简写成如下格式：

![127225cf70b64d869d7cee39d832a4cf.png][]

**4. 初次装包后** **多了哪些文件**

初次装包完成后，在项目文件夹下多一个叫做  node\_modules  的文件夹和  package-lock.json  的配置文件。

其中：

node\_modules 文件夹 用来 存放所有已安装到项目中的包 。require() 导入第三方包时，就是从这个目录中查找并加载包。

package-lock.json 配置文件 用来 记录 node\_modules 目录下的每一个包的下载信息 ，例如包的名字、版本号、下载地址等。

> 注意：程序员不要手动修改 node\_modules 或 package-lock.json 文件中的任何代码，npm 包管理工具会自动维护它们。

**5. 安装指定版本的包**

默认情况下，使用 npm install 命令安装包的时候， 会自动安装最新版本的包 。如果需要安装指定版本的包，可以在包

名之后，通过  @ 符号 指定具体的版本，例如：

![4f75ab6cb6584b78a1360df2e7223738.png][]

**6. 包的** **语义化版本规范**

包的版本号是以“点分十进制”形式进行定义的，总共有三位数字，例如  **2.24.0**

其中每一位数字所代表的的含义如下：

第1位数字： 大版本

第2位数字： 功能版本

第3位数字：Bug修复版本

版本号提升的规则 ：只要前面的版本号增长了，则后面的版本号 归零 。

#### **3.3 包管理配置文件**  ####

npm 规定，在 项目根目录 中， **必须** 提供一个叫做  package.json  的包管理配置文件。用来记录与项目有关的一些配置

信息。例如：

*  项目的名称、版本号、描述等 
 *  项目中都用到了哪些包 
 *  哪些包只在开发期间会用到 
 *  那些包在开发和部署时都需要用到

**1. 多人协作的问题**

![60fc6c21144d4da18e19781f9c5cc715.png][]

**2. 如何记录项目中安装了哪些包**

在 项目根目录 中，创建一个叫做  package.json  的配置文件，即可用来记录项目中安装了哪些包。从而方便剔除

node\_modules 目录之后，在团队成员之间共享项目的源代码。

> **注意** ：今后在项目开发中，一定要把 node\_modules 文件夹，添加到 .gitignore 忽略文件中。

**3. 快速创建 package.json**

npm 包管理工具提供了一个 快捷命令 ，可以在 执行命令时所处的目录中 ，快速创建 package.json 这个包管理

配置文件：

![834a31b5d3f84c4da53a50cb6c4989cf.png][]

> 注意： 
> 
> ① 上述命令 只能在英文的目录下成功运行 ！所以，项目文件夹的名称一定要使用英文命名， 不要使用中文 ， 不能出现空格 。 
> 
> ② 运行 npm install 命令安装包的时候，npm 包管理工具会自动把 包的名称 和 版本号 ，记录到 package.json 中。

**4.**  **dependencies**  **节点**

![e98a0084e8ac4a63b437f5e78703ae97.png][]

**5.**  **一次性** **安装所有的包**

当我们拿到一个 剔除了 node\_modules  的项目之后，需要先把所有的包下载到项目中，才能将项目运行起来。

否则会报类似于下面的错误：

![54f0238e301d4515bbf5f55c55417019.png][]

可以运行  npm install  命令（或  npm i ）一次性安装所有的依赖包：

![b18a414a73d24af38afe6b99b37e89a9.png][]

**6. 卸载包**

可以运行  npm uninstall  命令，来卸载指定的包：

![11dab7fc378d4089a7892ff6dd3401c5.png][]

> 注意：npm uninstall 命令执行成功后，会把卸载的包，自动从 package.json 的 dependencies 中移除掉。

**7.**  **devDependencies**  **节点**

如果某些包 **只在项目开发阶段** 会用到，在 **项目上线之后不会用到** ，则建议把这些包记录到 devDependencies 节点中。

与之对应的，如果某些包在 开发 和 项目上线之后 都需要用到，则建议把这些包记录到 dependencies 节点中。

您可以使用如下的命令，将包记录到 devDependencies 节点中：

![582ea8db532d41159cfdc4c25fca66fb.png][]

#### **3.4 解决下包速度慢的问题**  ####

**1. 为什么下包速度慢**

在使用 npm 下包的时候，默认从国外的  https://registry.npmjs.org/  服务器进行下载，此时，网络数据的传输需要经

过漫长的海底光缆 ， 因此下包速度会很慢。

扩展阅读 -  海底光缆 ：

*  https://baike.baidu.com/item/%E6%B5%B7%E5%BA%95%E5%85%89%E7%BC%86/4107830 
 *  https://baike.baidu.com/item/%E4%B8%AD%E7%BE%8E%E6%B5%B7%E5%BA%95%E5%85%89%E7%BC% 
 *  86/10520363 
 *  https://baike.baidu.com/item/APG/23647721?fr=aladdin

**2. 淘宝 NPM 镜像服务器**

![e5d5fba3a2a24fa498c60c05b8968b53.png][]

**3.**  **切换**  **npm 的下包镜像源**

下包的镜像源，指的就是 下包的服务器地址 。

![a18e3cc894fa4845a14fd7e2d5a1cbae.png][]

**4. nrm**

为了更方便的切换下包的镜像源，我们可以安装  **nrm**  这个小工具，利用 nrm 提供的终端命令，可以快速查看和切换下 包的镜像源。

![73c978fc2a304a56b1b9cec82bfd7666.png][]

**3.5 包的分类**

使用 npm 包管理工具下载的包，共分为两大类，分别是：

*  项目包 
 *  全局包

**1. 项目包**

那些被安装到 项目 的  node\_modules 目录 中的包，都是项目包。

项目包又分为两类，分别是：

*  开发依赖包（被记录到 devDependencies 节点中的包，只在开发期间会用到） 
 *  核心依赖包（被记录到 dependencies 节点中的包，在开发期间和项目上线之后都会用到）

![251b0ec5aa924e19999e55cb26dd2d4e.png][]

**2. 全局包**

在执行 npm install 命令时，如果提供了  \-g  参数，则会把包安装为 全局包 。

全局包会被安装到  C:\\Users\\用户目录\\AppData\\Roaming\\npm\\node\_modules  目录下。

![0ed0775ba38b4e669ecad67065c140ad.png][]

> 注意： 
> 
> ① 只有 工具性质的包 ，才有全局安装的必要性。因为它们提供了好用的终端命令。 
> 
> ② 判断某个包是否需要全局安装后才能使用，可以 参考官方提供的使用说明 即可。

**3. i5ting\_toc**

i5ting\_toc 是一个可以把 md 文档转为 html 页面的小工具，使用步骤如下：

![d077d53a46544877a0a83368049d3aa6.png][]

#### **3.6 规范的包结构**  ####

在清楚了包的概念、以及如何下载和使用包之后，接下来，我们深入了解一下 包的内部结构 。

一个规范的包，它的组成结构，必须符合以下 3 点要求：

① 包必须以 单独的目录 而存在

② 包的顶级目录下要必须包含  package.json  这个包管理配置文件

③ package.json 中必须包含  name ， version ， main  这三个属性，分别代表 包的名字 、 版本号 、 包的入口 。

> 注意：以上 3 点要求是一个规范的包结构必须遵守的格式，关于更多的约束，可以参考如下网址： 
> 
> https://yarnpkg.com/zh-Hans/docs/package-json

### **4. 模块的加载机制**  ###

#### **4.1 优先从缓存中加载**  ####

**模块在第一次加载后会被缓存** 。 这也意味着多次调用  require()  不会导致模块的代码被执行多次。

> 注意：不论是内置模块、用户自定义模块、还是第三方模块，它们都会优先从缓存中加载，从而 提高模块的加载效率 。

#### **4.2** **内置模块****的加载机制**  ####

内置模块是由 Node.js 官方提供的模块， 内置模块的加载优先级最高 。

例如，require('fs') 始终返回内置的 fs 模块，即使在 node\_modules 目录下有名字相同的包也叫做 fs。

#### **4.3** **自定义模块****的加载机制**  ####

使用 require() 加载自定义模块时，必须指定以  ./  或  ../  开头的 路径标识符 。在加载自定义模块时，如果没有指定 ./ 或 ../

这样的路径标识符，则 node 会把它当作 内置模块 或 第三方模块 进行加载。

同时，在使用 require() 导入自定义模块时，如果省略了文件的扩展名，则 Node.js 会 按顺序 分别尝试加载以下的文件：

① 按照 确切的文件名 进行加载

② 补全  .js  扩展名进行加载

③ 补全  .json  扩展名进行加载

④ 补全  .node  扩展名进行加载

⑤ 加载失败，终端报错

#### **4.4** **第三方模块****的加载机制**  ####

如果传递给 require() 的模块标识符不是一个内置模块，也没有以 ‘./’ 或 ‘../’ 开头，则 Node.js 会从当前模块的父 目录开始，尝试从 /node\_modules 文件夹中加载第三方模块。

如果没有找到对应的第三方模块，则移动到再上一层父目录中，进行加载，直到文件系统的根目录。

例如，假设在 ' C:\\Users\\itheima\\project\\ foo.js' 文件里调用了  require('tools') ，则 Node.js 会按以下顺序查找：

①  C:\\Users\\itheima\\project\\ node\_modules\\ tools

②  C:\\Users\\itheima\\ node\_modules\\ tools

③  C:\\Users\\ node\_modules\\ tools

④  C:\\ node\_modules\\ tools

#### **4.5** **目录****作为模块**  ####

当把目录作为模块标识符，传递给 require() 进行加载的时候，有三种加载方式：

① 在被加载的目录下查找一个叫做 package.json 的文件，并寻找 main 属性，作为 require() 加载的入口

② 如果目录里没有 package.json 文件，或者 main 入口不存在或无法解析，则 Node.js 将会试图加载目录下的  index.js 文件 。

③ 如果以上两步都失败了，则 Node.js 会在终端打印错误消息，报告模块的缺失：Error: Cannot find module 'xxx

[92f621814d104a508378235458beab57.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/57d192dac585476badf0f80fc7619859.png
[b46b521329f245d6ada4ed5fbdb74af4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/e1b9ab74ad2940c2ae090455353952e4.png
[c6f5938dd6b546dca99e8b70ae01de90.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/c709aa6e28d14d019aa5260ec07947af.png
[411d55c2d2b24360bbcb6187725dd9b8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/69722a6b35614171917a6d7db3f62922.png
[f9f69046bd6c4f2baf10899c4e5d938b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/19f643df07e648a6a413196c129f1bd7.png
[c3e0977fcf6a41e1a957250b5ce6ab05.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/f37d25e42c944842b42b64608cc88c88.png
[3dd75f2f78334c059d0613594f6e5aa9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/e5e338cb0f9c407ab56908ff69ffef40.png
[fa6e6d7b231e4179b8f9dc980c561763.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/bb2e82d3b77541aaaa712210e8d99d42.png
[2225f4b4a1dc4b00996b802fc0d956d6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/9f6880ca19af449a9b195981e3b11f73.png
[e454ea3033454c94ae982fbb0f26b7d9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/109965f3cb7442d182dd1ef9ef8621bc.png
[60509039fa0e4ec5855d70f9323fec5b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/a9beb914462f4f6ab239c2c5d92769b4.png
[127225cf70b64d869d7cee39d832a4cf.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/b95bda6ead9144cf8581bbfeb07291a2.png
[4f75ab6cb6584b78a1360df2e7223738.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/ba10ddbcc3dd4077892ad122d494b04f.png
[60fc6c21144d4da18e19781f9c5cc715.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/0c31feb852474961bf669f24618a0e27.png
[834a31b5d3f84c4da53a50cb6c4989cf.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/2e47ac292c024221a08cc8f07c453ab9.png
[e98a0084e8ac4a63b437f5e78703ae97.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/3caf67222885457caf6993e16ded1c8a.png
[54f0238e301d4515bbf5f55c55417019.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/d416d478029745daa8fc3a65b37b3f2f.png
[b18a414a73d24af38afe6b99b37e89a9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/4017797f6f284c4585afd64031e4ded0.png
[11dab7fc378d4089a7892ff6dd3401c5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/bd9dc039dcc74c53bef43eae5adf2bda.png
[582ea8db532d41159cfdc4c25fca66fb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/e352de302a1e4ca8a99b777311f94196.png
[e5d5fba3a2a24fa498c60c05b8968b53.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/e08011478de748afb29ea09da1d4216c.png
[a18e3cc894fa4845a14fd7e2d5a1cbae.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/bf138855f74c48cdb458ada8eba75f80.png
[73c978fc2a304a56b1b9cec82bfd7666.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/bfd9cca2bbff472384e7b299e3d433db.png
[251b0ec5aa924e19999e55cb26dd2d4e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/8803d968a09743eab0639f7afebfc0a0.png
[0ed0775ba38b4e669ecad67065c140ad.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/3dff662209934ed78d0ad559306f037f.png
[d077d53a46544877a0a83368049d3aa6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/22d4e690de9340ab97dc9d89487f45c7.png