Node.js 模块化学习（详细语法代码示例《包含笔记》）

MakeFullStack

已于 2023-08-10 16:16:21 修改

阅读量282

点赞数 1

分类专栏： Node.Js 文章标签： node.js 学习笔记前端

于 2023-07-28 21:11:18 首次发布

本文链接：https://blog.csdn.net/Forever_Hopeful/article/details/131987973

版权

Node.Js 专栏收录该内容

2 篇文章 1 订阅

订阅专栏

node.js模块化

文章目录

node.js模块化
- - 什么是模块化？
CommonJs标准(导入导出)
ECMAScript标准-默认导入导出
ECMAScript标准-命名导入导出
- 总结Node.js支持的两种模块化标准
包的概念
- - 代码示例
npm-软件包管理器
npm-安装所有依赖
- - - - 代码演示
npm-全局软件包 nodemon
node.js常用命令总结

什么是模块化？

每个文件都被视为一个单独的模块。

概念：项目是由很多个模块文件组成的。

优点：提高代码复用性，按需加载，独立作用域。

使用方法**：需要标准语法导出和导入进行使用。**

CommonJs标准(导入导出)

语法和示例

导出代码示例

导入代码示例

语法和示例

语法：导出==》》module.exports = {}
- 导入 ==》》require(‘模块名或路径’)
  
  模块名或路径：分为两种：一种是内置模块一种是自定义模块
  - 内置模块：直接写名字（例如：fs ，path ，http）
  - 自定义模块：写模块文件路径（例如：./utils.js）

需求：定义utils.js模块，封装基地址和求数组总和的函数。

导出代码示例

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

// 导出
module.exports = {
    // 暴露的值
    url: basetURL,
    arraySum: getArraySum
}

导入代码示例

/*
* 目标：基于 CommonJs 标准语法 ，导入工具属性和方法使用
 * 
*/

// 导入
const obj = require('./utils.js')
console.log(obj)
const result = obj.arraySum([5,1,2,3])
console.log(result)

ECMAScript标准-默认导入导出

需求：定义utils.js模块，封装基地址和求数组总和的函数。

语法示例
- 默认标准使用：
  - 导出： export default{}
  - 导入：inport 变量名 from ‘模块名后路径’
  - 注意： node.js 默认支持CommonJs 标准语法
  所以我们需要在运型模块所在文件夹新建 package.json文件，并设置{“type”:“module”}

导出代码示例：

/*
* 目标：基于ECMAScript 标准语法，封装属性和方法，并 “默认导出”
*/

const baseURL = 'http://hmajax.itheima.net'
// 封装一个arr函数方法，使用reduce方法数组进行数组求和
const getArraySum = arr => arr.reduce((sum,item) => sum += item,0)

// 默认导出
export default {
    // 暴露的内容给需要该封装的功能模块
    url: baseURL,
    arraySum: getArraySum
}

导出代码解析

首先，`const baseURL = 'http://hmajax.itheima.net'` 定义了一个名为 `baseURL` 的常量，其值为 `'http://hmajax.itheima.net'`。这个常量用于存储一个基础的 URL 地址。

接下来，getArraySum 是一个函数，它接受一个数组作为参数，并使用 reduce 方法对数组进行求和操作。reduce 方法是 JavaScript 数组的一个高阶方法，用于对数组中的元素进行累积操作。在这个例子中，reduce 方法的初始值为 0，然后对数组中的每个元素执行回调函数 (sum, item) => sum += item，将每次计算的结果累加到 sum 中，最终得到数组的总和。

最后，通过 export default 导出一个对象，包含两个属性：url 和 arraySum。url 属性的值为前面定义的 baseURL 常量，而 arraySum 属性的值为前面定义的 getArraySum 函数。这样，在其他需要使用这些功能的模块中，可以直接导入这个对象并访问其中的属性和方法。

导入代码示例：

/*
* 目标：基于ECMAScript 标准语法，封装属性和方法，并 “默认导入”，对属性法方法进行使用
*/
import obj from './utils.js'  
//obj === { url: 'http://hmajax.itheima.net', arraySum: [Function: getArraySum] }
// 通过路径导入得到提供功能的文件夹做暴露出来的内容
console.log(obj)
// ，arraySum 和 getArraySum 是等价的引用，操作 arraySum 就相当于操作 getArraySum。
const result = obj.arraySum([10,20,30]) //这个数组实参传递给了形参arr
console.log(result)

导入代码解析

你的代码中导入了一个名为 `obj` 的对象，该对象是从 `./utils.js` 文件中导出的。这意味着 obj 对象包含两个属性：url 和 arraySum。url 属性的值是 'http://hmajax.itheima.net'，而 arraySum 属性的值是一个函数，即 [Function: getArraySum]。这个函数就是之前定义的 getArraySum 函数。

接下来，你调用了 obj.arraySum([10,20,30])，将数组 [10, 20, 30] 作为实参传递给了 arraySum 方法，这个数组被赋值给了形参 arr。

然后，你使用 console.log(result) 打印了 result 变量的值。这里假设 getArraySum 函数正确实现了对数组求和的功能，那么 result 的值将是数组 [10, 20, 30] 的总和，即 60。

ECMAScript标准-命名导入导出

语法使用

命名标准使用：1、导出 ===》 export修饰定义语句
- 2、导入 ===》 import{同名变量}from ‘模块或路径’

关于默认和命名导入和导出该如何选择呢？

按需加载，使用命名导出和导入
全部加载，使用默认导出和导入

命名导出模块

命名导出导入的代码演示如下：

使用export修饰符导出模块

/*
* 目标：基于ECMAScript 标准语法，封装属性和方法，并 “命名导出”，对属性法方法进行使用
*/

export const baseURL = 'http://hmajax.itheima.net'
export const getArraySum = arr => arr.reduce((sum,item) => sum += item,0)

// 语句前面添加了export关键字，来修饰。表示导出语句

命名导入模块

导入模块 import{} from’’

/*
* 目标：基于ECMAScript 标准语法，封装属性和方法，并 “命名导入”，对属性法方法进行使用
*/

// 大括号中的变量名字要和导出的一致，多个用逗号隔开
import {baseURL,getArraySum} from './utils.js'
console.log(baseURL)
console.log(getArraySum)
// 调用该函数出入实参
const result = getArraySum([100,200,220])
console.log(result)//返回结果： 520
console.log(baseURL)//返回结果：http://hmajax.itheima.net

总结Node.js支持的两种模块化标准

第一种默认的：CommonjS标准语法（默认）

第二种推荐的：ECMAScript标准语法（官方推荐的)

需要注意的是ECMAScript有两种导入方式（一种是默认导出导入，一种是命名导出导入）

默认导出：export default{}
默认导入：import 变量名 from ‘模块名或路径’

命名导出： export 修饰定义的语句
命名导入：import {同名变量} from ‘模块名或路径’

=> 按需加载用命名方式，全部加载用默认方式。

包的概念

包的概念：将模块、代码、其他资料等聚合成一个文件夹

包的分类：

项目包：主要用于编写项目和业务逻辑

软件包：封装工具和方法进行使用

要求：根目录中必须要有package.json文件（记录包的清单信息）
注意：导入软件包时，引入的默认是index.js模块文件 / main属性制定的模块文件

目标：导入 utils 软件包，使用里面封装的工具函数

代码示例

// 我们utils里面的软件包的内容被打包在index.js文件中

// 导入软件包（默认会找到index.js文件）
const obj = require('./utils')  //自定义的包都是默认路径
console.log(obj)

// 返回结果  
// 相当于 ；obj  =  {
//     getArraySum: [Function: getArraySum],
//     checkUser: [Function: checkUserName],
//     checkPwd: [Function: checkPassWord]
//   }
// 

// 调用软件包里面的功能方法和属性
const result = obj.getArraySum([10,4,1000,300])
console.log(result)

一定要注意：1、我们utils软件包里面的所有功能包的内容事先被打包在index.js文件中

				   2、最后我们在导入软件包（默认会找到index.js文件）或者main属性指定的文件

npm-软件包管理器

拓展问题：

使用npm第三方包下载软件包的时候；在步骤没有问题的前提下发生了一堆错误

解决的办法为：最有可能是没有执行权限，我们要以管理员什么打开vscode，然后在执行步骤就可以了。

npm的作用和使用

npm软件包管理器的作用：下载软件包以及管理版本
下载后的包会放在 node_modules中，并记录在package.json中
- 目标：使用 npm 下载 dayjs 软件包来格式化日期时间
- 1. （可选）初始化项目清单文件，命令：npm init -y
- 1. 下载软件包到当前项目，命令：npm i 软件包名称
- 1. 使用软件包
如果在执行步骤2 的时候出现了报错问题，请看上面的拓展问题。

代码演示：

//3、 使用软件包（前提是通过第 1  2  点步骤后执行）
const dayjs = require('dayjs')   //导入后为一个函数
// dayjs包导出来的是一个函数，所以我们先调用该函数，然后再调用对象中格式化方法
const nowDateStr = dayjs().format('YYYY-MM-DD')
console.log(nowDateStr)

代码详细解析：

上述代码是使用dayjs库进行日期处理的示例。下面是对代码的详细解释：

第一行导入了名为dayjs的库，它是一个用于处理日期和时间的JavaScript库。通过require(‘dayjs’)引入该库，并将其赋值给变量dayjs。

第三行调用了dayjs()函数，这是dayjs库的主要函数。它返回当前的日期和时间对象。

接着使用.format(‘YYYY-MM-DD’)方法来对日期对象进行格式化。format()方法可以将日期对象以指定的格式转换成字符串。在这里，传递的参数’YYYY-MM-DD’表示希望得到的日期格式为年份-月份-日期。

将格式化后的日期字符串赋值给nowDateStr变量。

最后一行使用console.log()函数打印输出nowDateStr变量的值，即当前日期的字符串表示。

总结：以上代码导入了dayjs库并使用它来获取当前日期，并以指定的格式YYYY-MM-DD进行格式化，并将格式化后的日期字符串打印输出。

npm-安装所有依赖

目标：安装所有依赖软件包

* 场景：一般拿到别人的项目后，只有 package.json 缺少 node_modules 时需要做

* 语法：在当前项目终端下，输入命令：npm i

* 效果：会根据 package.json 记录的所有包和版本开始下载

代码演示

注意在没有安装依赖node_modules文件夹时，无法使用软件包，解决办法需要在终端输入 npm i来查找并下载

// 格式化日期
const dayjs = require('dayjs')
const nowDateStr = dayjs().format('YYYY-MM-DD')
console.log(nowDateStr)

// 求数组里最大值
const _ = require('lodash')
console.log(_.max([1, 2, 8, 3, 4, 5]))

npm-全局软件包 nodemon

软件包的区别

本地软件包：当前项目内使用，封装属性和方法，存在于 node_modules
全局软件包：本机所有项目使用，封装命令工具，存在于系统设置的位置

nodemon作用

nodemon作用：代替node命令，检测代码更改，自动重启程序

modemon使用

modemon使用：安装：npm i nodemon -g (-g代表安装到全局环境中)
nodemon运行：nodemon待执行的目标文件

目标

目标：使用 nodemon 全局软件包，检测文件变化，自动重启程序

语法：

* 1. 安装 nodemon 全局软件包，命令：npm i nodemon -g

* 2. 使用 nodemon 来执行目标 js 文件

* 体验：启动后，修改代码，保存后观察终端效果

代码示例

// 格式化日期
const dayjs = require('dayjs')
const nowDateStr = dayjs().format('YYYY-MM-DD')
console.log(nowDateStr)

// 求数组里最大值
const _ = require('lodash')
console.log(_.max([1, 10, 2, 3, 4, 50]))   //nodemon 全局软件包  只要文件内容一修改，他会实时运行文件（实时检测代码变化）

nodemon全局软件包：实时检测文件代码的更改，自动重启程序帮我们执行运行

node.js常用命令总结

Node.js 模块化

概念：每个文件当做一个模块，独立作用域，按需加载
使用：采用特定的标准语法导出和导入进行使用

两个标准

1、CommonJs标准

导出语法：module.exports = {}
导入语法：require(‘模块名或路径’)

2、ECMAScript标准

细分为两种：一种是默认导出导入一种是命名导出导入。

默认导出：export default{}

默认导入：import 变量名 from ‘模块名或路径’

命名导出：export 修饰定义语法
命名导入import{同名变量} from ‘模块名或路径名’

两个标准使用场景的选择

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

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

CommonJs标准	导出语法：module.exports = {}	导入语法：require(‘模块名或路径’)
ECMAScript标准（默认）	默认导出语法：export default{}	默认导入语法：import 变量名 from ‘模块名或路径’
ECMAScript标准（命名）	命名导出语法：export 修饰定义语法	命名导入语法：import{同名变量} from ‘模块名或路径名’

Node.js包

node.js 包：把模块文件、代码文件，其他资料聚合城一个文件夹。由此可知：文件就相当于是模块。

包的两大类

一个是项目包：编写项目需求和业务逻辑的文件夹

一个是软件包：封装工具和方法进行使用的文件夹（一般使用 npm 管理）

软件包有本地软件包 和 全局软件包

本地软件包：例如：dayjs lodash …

全局软件包：nodemon

常用命令总结

功能	命令
执行js文件	node xxx （xxx为文件名）
初始化 package.json	npm init -y
下载本地软件包	npm i 软件包名
下载全局软件包	npm i 软件包名 -g
删除软件包	npm uni 软件包名（删除全局和下载一样加一个 -g）