02_Node.js模块化

知识点自测

以下代码运行的结果是多少？
javascript 复制代码
```
const arr = [10, 20, 30]
const result = arr.map(val => val + 1).reduce((sum, val) => sum += val, 0)
console.log(result)
```
A：60

B：63

<details><summary>答案</summary><ul><li>B选项正确</li></ul></details>

以下代码运行的结果是多少？
javascript 复制代码
```
const obj = { username: 'itheima', password: '777777' }
const { uname } = obj
console.log(uname)
```
A：itheima

B：undefined

<details><summary>答案</summary><ul><li>A选项正确</li></ul></details>

01.模块化简介

目标

了解模块化概念和好处，以及 CommonJS 标准语法导出和导入

讲解

在 Node.js 中每个文件都被当做是一个独立的模块，模块内定义的变量和函数都是独立作用域的，因为 Node.js 在执行模块代码时，将使用如下所示的函数封装器对其进行封装
而且项目是由多个模块组成的，每个模块之间都是独立的，而且提高模块代码复用性，按需加载，独立作用域
但是因为模块内的属性和函数都是私有的，如果对外使用，需要使用标准语法导出和导入才可以，而这个标准叫 CommonJS 标准，接下来我们在一个需求中，体验下模块化导出和导入语法的使用
需求：定义 utils.js 模块，封装基地址和求数组总和的函数，导入到 index.js 使用查看效果

导出语法：

javascript 复制代码

module.exports = {
  对外属性名: 模块内私有变量
}

导入语法：

javascript 复制代码

const 变量名 = require('模块名或路径')
// Node.js 环境内置模块直接写模块名（例如：fs，path，http）
// 自定义模块：写模块文件路径（例如：./utils.js)

变量名的值接收的就是目标模块导出的对象

代码实现

utils.js：导出

javascript 复制代码

/**
 * 目标：基于 CommonJS 标准语法，封装属性和方法并导出
 */
const baseURL = 'http://hmajax.itheima.net'
const getArraySum = arr => arr.reduce((sum, item) => sum += item, 0)

// 导出
module.exports = {
  url: baseURL,
  arraySum: getArraySum
}

index.js：导入使用

javascript 复制代码

/**
 * 目标：基于 CommonJS 标准语法，导入工具属性和方法使用
 */
// 导入
const obj = require('./utils.js')
console.log(obj)
const result = obj.arraySum([5, 1, 2, 3])
console.log(result)

小结

Node.js 中什么是模块化?

<details><summary>答案</summary><ul><li>每个文件都是独立的模块</li></ul></details>
模块之间如何联系呢?

<details><summary>答案</summary><ul><li>使用特定语法，导出和导入使用</li></ul></details>
CommonJS 标准规定如何导出和导入模块?

<details><summary>答案</summary><ul><li>导出：module.exports = {},导入：require('模块名或路径')</li></ul></details>
模块名/路径如何选择?

<details><summary>答案</summary><ul><li>内置模块：写名字。例如：fs，path，http等。自定义模块：写模块文件路径，例如：./utils.js</li></ul></details>

02.ECMAScript标准-默认导出和导入

目标

掌握 ECMAScript 标准语法中，默认导出和导入的使用

讲解

CommonJS 规范是 Node.js 环境中默认的，后来官方推出 ECMAScript 标准语法，我们接下来在一个需求中，体验下这个标准中默认导出和导入的语法要如何使用
需求：封装并导出基地址和求数组元素和的函数，导入到 index.js 使用查看效果

导出语法：

javascript 复制代码

export default {
  对外属性名: 模块内私有变量
}

导入语法：
javascript 复制代码
```
import 变量名 from '模块名或路径'
```
变量名的值接收的就是目标模块导出的对象

注意：Node.js 默认只支持 CommonJS 标准语法，如果想要在当前项目环境下使用 ECMAScript 标准语法，请新建 package.json 文件设置 type: 'module' 来进行设置
javascript 复制代码
```
{ "type": "module" }
```

代码实现：

utils.js：导出

javascript 复制代码

/**
 * 目标：基于 ECMAScript 标准语法，封装属性和方法并"默认"导出
 */
const baseURL = 'http://hmajax.itheima.net'
const getArraySum = arr => arr.reduce((sum, item) => sum += item, 0)

// 默认导出
export default {
  url: baseURL,
  arraySum: getArraySum
}

index.js：导入

javascript 复制代码

/**
 * 目标：基于 ECMAScript 标准语法，"默认"导入，工具属性和方法使用
 */
// 默认导入
import obj from './utils.js'
console.log(obj)
const result = obj.arraySum([10, 20, 30])
console.log(result)

小结

ECMAScript 标准规定如何默认导出和导入模块?

<details><summary>答案</summary><ul><li>导出：export default {} 导入：import 变量名 from '模块名或路径'</li></ul></details>
如何让 Node.js 切换模块标准为 ECMAScript？

<details><summary>答案</summary><ul><li>运行模块所在文件夹，新建 package.json 并设置 {"type"："module"}</li></ul></details>

03.ECMAScript标准-命名导出和导入

目标

掌握 ECMAScript 标准语法中，命名导出和导入的使用

讲解

ECMAScript 标准的语法有很多，常用的就是默认和命名导出和导入，这节课我们来学习下命名导出和导入的使用
需求：封装并导出基地址和数组求和函数，导入到 index.js 使用查看效果
命名导出语法：
复制代码
```
export 修饰定义语句
```
命名导入语法：
复制代码
```
import { 同名变量 } from '模块名或路径'
```
注意：同名变量指的是模块内导出的变量名

代码示例：

utils.js 导出

javascript 复制代码

/**
 * 目标：基于 ECMAScript 标准语法，封装属性和方法并"命名"导出
 */
export const baseURL = 'http://hmajax.itheima.net'
export const getArraySum = arr => arr.reduce((sum, item) => sum += item, 0)

index.js 导入

javascript 复制代码

/**
 * 目标：基于 ECMAScript 标准语法，"命名"导入，工具属性和方法使用
 */
// 命名导入
import {baseURL, getArraySum} from './utils.js'
console.log(obj)
console.log(baseURL)
console.log(getArraySum)
const result = getArraySum([10, 21, 33])
console.log(result)

与默认导出如何选择：
- 按需加载，使用命名导出和导入
- 全部加载，使用默认导出和导入

小结

Node.js 支持哪 2 种模块化标准?

<details><summary>答案</summary><ul><li>CommonJS 标准语法（默认）</li><li>ECMAScript 标准语法</li></ul></details>
ECMAScript 标准，命名导出和导入的语法?

<details><summary>答案</summary><ul><li>导出：export 修饰定义的语句，import { 同名变量 } from '模块名或路径'</li></ul></details>
ECMAScript 标准，默认导出和导入的语法？

<details><summary>答案</summary><ul><li>导出：export default {} 导入：import 变量名 from '模块名或路径'</li></ul></details>

04.包的概念

目标

了解 Node.js 环境中包的概念

讲解

包：将模块，代码，其他资料整合成一个文件夹，这个文件夹就叫包
包分类：
- 项目包：主要用于编写项目和业务逻辑
- 软件包：封装工具和方法进行使用
包要求：根目录中，必须有 package.json 文件（记录包的清单信息）
包使用：在引入一个包文件夹到代码中，默认引入的是包文件节下的 index.js 模块文件里导出的对象，如果没有 index.js 文件，则会引入 package.json 里 main 属性指定的文件模块导出的对象
需求：封装数组求和函数的模块，封装判断用户名和密码长度函数的模块，形成一个软件包，并导入到 index.js 中使用查看效果

代码示例：

utils/lib 相关代码在素材里准备好了，只需要自己在 utils/index.js 统一出口进行导出

javascript 复制代码

/**
 * 本文件是，utils 工具包的唯一出口
 * 作用：把所有工具模块方法集中起来，统一向外暴露
 */
const { getArraySum } = require('./lib/arr.js')
const { checkUser, checkPwd } = require('./lib/str.js')

// 统一导出所有函数
module.exports = {
  getArraySum,
  checkUser,
  checkPwd
}

复制代码

index.js 导入软件包文件夹使用（注意：这次导入的是包文件夹，不是模块文件）

javascript 复制代码

/**
 * 目标：导入 utils 软件包，使用里面封装的工具函数
 */
const obj = require('./utils')
console.log(obj)
const result = obj.getArraySum([10, 20, 30])
console.log(result)

小结

什么是包?

<details><summary>答案</summary><ul><li>将模块，代码，其他资料聚合成的文件夹</li></ul></details>
包分为哪 2 类呢?

<details><summary>答案</summary><ul><li>项目包：编写项目代码的文件夹，软件包：封装工具和方法供开发者使用</li></ul></details>
package.json 文件的作用?

<details><summary>答案</summary><ul><li>记录软件包的名字，作者，入口文件等信息</li></ul></details>
导入一个包文件夹的时候，导入的是哪个文件?

<details><summary>答案</summary><ul><li>默认 index.js 文件，或者 main 属性指定的文件</li></ul></details>

05.npm软件包管理器

目标

掌握使用 npm 管理软件包

讲解

npm 简介链接：软件包管理器，用于下载和管理 Node.js 环境中的软件包
npm 使用步骤：
1. 初始化清单文件： npm init -y （得到 package.json 文件，有则跳过此命令）
  
  注意 -y 就是所有选项用默认值，所在文件夹不要有中文/特殊符号，建议英文和数字组成，因为 npm 包名限制建议用英文和数字或者下划线中划线
2. 下载软件包：npm i 软件包名称
3. 使用软件包
需求：使用 npm 下载 dayjs 软件包到本地项目文件夹中，引入到 index.js 中格式化日期打印，运行观察效果
具体使用流程图：

小结

npm 软件包管理器作用？

<details><summary>答案</summary><ul><li>下载软件包以及管理版本</li></ul></details>
初始化项目清单文件 package.json 命令?

<details><summary>答案</summary><ul><li>npm init -y</li></ul></details>
下载软件包的命令？

<details><summary>答案</summary><ul><li>npm i 软件包名字</li></ul></details>
下载的包会存放在哪里?

<details><summary>答案</summary><ul><li>当前项目下的 node_modules 中，并记录在 package.json 中</li></ul></details>

06.npm安装所有依赖

目标

掌握 npm 安装所有依赖功能

讲解

我们拿到了一个别人编写的项目，但是没有 node_modules，项目能否正确运行？

不能，因为缺少了项目需要的依赖软件包，比如要使用 dayjs 和 lodash 但是你项目里没有这个对应的源码，项目会报错的
为何没有给我 node_modules？

因为每个人在自己的本机使用 npm 下载，要比磁盘间传递要快（npm 有缓存在本机）
如何得到需要的所有依赖软件包呢？

直接在项目目录下，运行终端命令：npm i 即可安装 package.json 里记录的所有包和对应版本到本项目中的 node_modules

需求：请在准备好的素材项目中，安装项目所有需要的依赖软件包，并运行 index.js 代码看是否正常！

小结

当前项目中只有 package.json 没有 node_modules 怎么办?

<details><summary>答案</summary><ul><li>当前项目目录下，打开终端，执行 npm i 安装所有依赖软件包</li></ul></details>
为什么 node_modules 不进行传递?

<details><summary>答案</summary><ul><li>因为用 npm 下载有缓存在本机，比磁盘之间传递要快</li></ul></details>

07.npm全局软件包-nodemon

目标

掌握本地软件包和全局软件包区别，体验 nodemon 的使用

讲解

软件包区别：
- 本地软件包：当前项目内使用，<span style="color: red;">封装属性和方法</span>，存在于 node_modules
- 全局软件包：本机所有项目使用，<span style="color: red;">封装命令和工具</span>，存在于系统设置的位置

nodemon 作用：替代 node 命令，检测代码更改，自动重启程序
使用：
1. 安装：npm i nodemon -g （-g 代表安装到全局环境中）
2. 运行：nodemon 待执行的目标 js 文件
需求：使用 nodemon 命令来启动素材里准备好的项目，然后修改代码保存后，观察终端重启应用程序

小结

本地软件包和全局软件包区别?

<details><summary>答案</summary><ul><li>本地软件包，作用在当前项目，封装属性和方法</li><li>全局软件包，本地所有项目使用，封装命令和工具</li></ul></details>
nodemon 作用?

<details><summary>答案</summary><ul><li>替代 node 命令，检测代码更改，自动重启程序</li></ul></details>
nodemon 怎么用?

<details><summary>答案</summary><ul><li>先确保安装 npm i nodemon -g</li><li>使用 nodemon 执行目标 js 文件</li></ul></details>

08.Node.js概念和常用命令总结

目标

把上面学的模块化语法，包的概念，常用命令进行总结

讲解

Node.js 模块化：把每个文件当做一个模块，独立作用域，按需加载，使用特定标准语法导出和导入使用

CommonJS 标准：一般应用在 Node.js 项目环境中

ECMAScript 标准：一般应用在前端工程化项目中

Node.js 包：把模块文件，代码文件，其他资料聚合成一个文件夹就是包
项目包：编写项目需求和业务逻辑的文件夹

软件包：封装工具和方法进行使用的文件夹（一般使用 npm 管理）
- 本地软件包：作用在当前项目，封装的属性/方法，供项目调用编写业务需求
- 全局软件包：作用在所有项目，一般封装的命令/工具，支撑项目运行

Node.js 常用命令：

小结

安装本地软件包的命令是什么？

<details><summary>答案</summary><ul><li>npm i 软件包名</li></ul></details>