详细介绍 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 标准 - 默认导出和导入和命名导出和导入如何选择 ?

  • 按需加载,使用命名导出和导入
  • 全部加载,使用默认导出和导入
相关推荐
崔庆才丨静觅5 小时前
hCaptcha 验证码图像识别 API 对接教程
前端
passerby60616 小时前
完成前端时间处理的另一块版图
前端·github·web components
掘了6 小时前
「2025 年终总结」在所有失去的人中,我最怀念我自己
前端·后端·年终总结
崔庆才丨静觅6 小时前
实用免费的 Short URL 短链接 API 对接说明
前端
崔庆才丨静觅7 小时前
5分钟快速搭建 AI 平台并用它赚钱!
前端
崔庆才丨静觅7 小时前
比官方便宜一半以上!Midjourney API 申请及使用
前端
Moment7 小时前
富文本编辑器在 AI 时代为什么这么受欢迎
前端·javascript·后端
崔庆才丨静觅7 小时前
刷屏全网的“nano-banana”API接入指南!0.1元/张量产高清创意图,开发者必藏
前端
剪刀石头布啊7 小时前
jwt介绍
前端
爱敲代码的小鱼7 小时前
AJAX(异步交互的技术来实现从服务端中获取数据):
前端·javascript·ajax