详细介绍 Node.js 模块化

目录

[1. 认识模块化](#1. 认识模块化)

[1.1. 什么是模块化?](#1.1. 什么是模块化?)

[1.2. 模块之间如何联系?](#1.2. 模块之间如何联系?)

[1.3. Node.js 支持哪 2 种模块化标准(特定语法)?](#1.3. Node.js 支持哪 2 种模块化标准(特定语法)?)

[1.4. CommonJS 标准](#1.4. CommonJS 标准)

[1.4.1. 需求](#1.4.1. 需求)

[1.4.2. 使用](#1.4.2. 使用)

[1.4.3. 需求代码如下:](#1.4.3. 需求代码如下:)

[1.5. ECMAScript 标准 - 默认导出和导入](#1.5. ECMAScript 标准 - 默认导出和导入)

[1.5.1. 需求](#1.5.1. 需求)

[1.5.2. 默认标准使用:](#1.5.2. 默认标准使用:)

[1.5.3. 注意](#1.5.3. 注意)

[1.5.4. 需求代码如下:](#1.5.4. 需求代码如下:)

[1.6. 如何让 Node.js 切换模块标准为 ECMAScript?](#1.6. 如何让 Node.js 切换模块标准为 ECMAScript?)

[1.7. ECMAScript 标准 - 命名导出和导入](#1.7. ECMAScript 标准 - 命名导出和导入)

[1.7.1. 需求](#1.7.1. 需求)

[1.7.2. 命名标准使用](#1.7.2. 命名标准使用)

[1.7.3. 需求代码如下:](#1.7.3. 需求代码如下:)

[1.8. ECMAScript 标准 - 默认导出和导入和命名导出和导入如何选择 ?](#1.8. ECMAScript 标准 - 默认导出和导入和命名导出和导入如何选择 ?)


1. 认识模块化

1.1. 什么是模块化?

  • 定义
  • 概念:项目是由很多个模块文件组成的
  • 好处:提高代码复用性,按需加载,独立作用域
  • 使用:需要标准语法导出和导入进行使用

1.2. 模块之间如何联系?

  • 使用特定语法,导出和导入使用

1.3. Node.js 支持哪 2 种模块化标准(特定语法)?

  • CommonJS 标准语法(默认)
  • ECMAScript 标准语法

1.4. CommonJS 标准

1.4.1. 需求
  • 定义 utils.js 模块,封装基地址和求数组总和的函数
1.4.2. 使用
  • 导出:module.exports = {}
  • 导入:require('模块名或路径')

内置模块:直接写名字(例如:fs,path,http)

自定义模块:写模块文件路径(例如:./utils.js)

1.4.3. 需求代码如下:
javascript 复制代码
/**
 * 目标:基于 CommonJS 标准语法,封装属性和方法并导出
 */
const baseURL = 'http://hmajax.itheima.net'
const getArraySum = arr => arr.reduce((sum, item) => sum += item, 0)

// 导出
module.exports = {
  url: baseURL,
  arraySum: getArraySum
}
javascript 复制代码
/**
 * 目标:基于 CommonJS 标准语法,导入工具属性和方法使用
 */
// 导入
const obj = require('./utils.js')
console.log(obj)
console.log(obj.url)
const result = obj.arraySum([5, 1, 2, 3])
console.log(result)

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

1.5.1. 需求
  • 封装并导出基地址和求数组元素和的函数
1.5.2. 默认标准使用:
  • 导出:export default {}
  • 导入:import 变量名 from '模块名或路径'
1.5.3. 注意
  • Node.js 默认支持 CommonJS 标准语法
  • 如需使用 ECMAScript 标准语法,在运行模块所在文件夹新建 package.json 文件,并设置 { "type" : "module" }
1.5.4. 需求代码如下:
javascript 复制代码
/**
 * 目标:基于 ECMAScript 标准语法,封装属性和方法并"默认"导出
 */
const baseURL = 'http://hmajax.itheima.net'
const getArraySum = arr => arr.reduce((sum, item) => sum += item, 0)

// 默认导出
export default {
  url: baseURL,
  arraySum: getArraySum
}
javascript 复制代码
/**
 * 目标:基于 ECMAScript 标准语法,"默认"导入,工具属性和方法使用
 */
// 默认导入
import obj from './utils.js'
console.log(obj)
const result = obj.arraySum([10, 20, 30])
console.log(result)
javascript 复制代码
{
  "type": "module"
}

1.6. 如何让 Node.js 切换模块标准为 ECMAScript?

  • 运行模块所在文件夹,新建 package.json 并设置 { "type" : "module" }

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

1.7.1. 需求
  • 封装并导出基地址和求数组元素和的函数
1.7.2. 命名标准使用
  • 导出:export 修饰定义语句
  • 导入:import { 同名变量 } from '模块名或路径
1.7.3. 需求代码如下:
javascript 复制代码
/**
 * 目标:基于 ECMAScript 标准语法,封装属性和方法并"命名"导出
 */
export const baseURL = 'http://hmajax.itheima.net'
export const getArraySum = arr => arr.reduce((sum, item) => sum += item, 0)
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)
javascript 复制代码
{
  "type": "module"
}

1.8. ECMAScript 标准 - 默认导出和导入和命名导出和导入如何选择 ?

  • 按需加载,使用命名导出和导入
  • 全部加载,使用默认导出和导入
相关推荐
两只羊ovo7 分钟前
Promise.all 并发请求实战:从串行 await 到双段并行
前端
七牛开发者26 分钟前
解读 Cordis:dsh 一切皆插件背后的运行时设计
前端·javascript·后端
BigTopOne35 分钟前
ArLiveLite 学习计划
前端
慧都小项1 小时前
夜间Web回归跑到一半停了?TestComplete 15.83提升批量测试稳定性
前端·测试工具·数据挖掘·回归·汽车·web
两只羊ovo1 小时前
Agent ≠ 聊天机器人:从一问一答到 ReAct 循环,到底差在哪?
前端
摇曳的精灵1 小时前
前端缓存优化
前端·缓存·缓存优化
老王以为1 小时前
走进 AI Agent 第二篇:决定 AI Agent 能力上限的关键技术
前端·人工智能·机器学习
何以解忧,唯有..1 小时前
Python 异常处理完全指南:从基础到高级实践
开发语言·前端·python
Buke..1 小时前
【小程序逆向】某游快爆 AI 逆向 sign参数:AI 辅助分析与 MCP 工具链实战
前端·人工智能·爬虫·python·小程序·notepad++
__zRainy__2 小时前
Node系列 · ORM:mysql 驱动程序
数据库·后端·mysql·node.js·orm