实用指南：Node.js模块化开发实训案例

news/2025/11/9 12:10:53/文章来源:https://www.cnblogs.com/yangykaifa/p/19204040

Node.js模块化开发实训案例

案例1：Node.js环境搭建与基础语法测试

需求描述

完成Node.js的安装与环境验证 node -v，还可以编写基础脚本测试Node.js运行环境，了解global全局对象的常用属性与方法，对比传统JavaScript与Node.js语法差异。

代码实例

  1. 环境验证脚本（env-test.js）
// 验证Node.js环境是否搭建成功
console.log("Node.js版本：", process.version); // 输出当前Node.js版本
console.log("当前工作目录：", process.cwd()); // 输出当前工作目录
// 测试global全局对象
console.log("\n=== 测试global全局对象 ===");
console.log("全局对象是否为global：", this === global); // Node.js中this指向global
console.log("定时器测试（3秒后执行）：");
const timer = setTimeout(() => {
console.log("定时器执行成功！");
clearTimeout(timer); // 清除定时器
}, 3000);
// 测试Node.js特有的全局属性
console.log("\n=== Node.js特有全局属性 ===");
console.log("__dirname（当前文件目录）：", __dirname);
console.log("__filename（当前文件路径）：", __filename);
  1. 运行步骤
    • 打开终端，执行命令：node env-test.js
    • 观察终端输出，确认Node.js版本正常显示，定时器能正常执行
    • 对比浏览器JavaScript：尝试在浏览器控制台输入__dirname，观察报错（浏览器无此全局变量）

案例2：模块化开发（CommonJS与ES6对比）

需求描述

分别使用CommonJS规范（exports/require）和ES6模块规范（export/import）实现模块化开发，完成“用户信息管理”功能，理解两种规范的语法差异与使用场景。

代码实例

2.1 CommonJS规范实现
  1. 用户数据模块（user-data.js）
// 定义用户数据与工具函数（CommonJS导出）
const userList = [
{ id: 1, name: "张三", age: 20 },
{ id: 2, name: "李四", age: 22 }
];
// 方法1：使用exports导出
exports.getUserById = (id) => {
return userList.find(user => user.id === id) || "用户不存在";
};
// 方法2：使用module.exports导出（适合导出对象/类）
module.exports = {
userList,
getUserById: (id) => {
return userList.find(user => user.id === id) || "用户不存在";
},
addUser: (user) => {
userList.push({ id: userList.length + 1, ...user });
return "用户添加成功";
}
};
// 注意：exports与module.exports的区别
// exports本质是module.exports的引用，直接赋值exports会断开引用
// 如下代码会失效：exports = { userList, getUserById }
  1. 主程序（commonjs-main.js）
// 引入用户数据模块（CommonJS导入）
const userModule = require("./user-data.js");
// 使用模块成员
console.log("=== CommonJS模块化测试 ===");
console.log("所有用户：", userModule.userList);
console.log("查询ID=1的用户：", userModule.getUserById(1));
console.log("添加新用户：", userModule.addUser({ name: "王五", age: 25 }));
console.log("添加后所有用户：", userModule.userList);
  1. 运行命令：node commonjs-main.js
2.2 ES6模块规范实现
  1. 修改package.json（添加模块类型声明）
{
"type": "module" // 声明当前项目使用ES6模块
}
  1. 用户数据模块（user-data-es6.js）
// 定义用户数据与工具函数（ES6导出）
const userList = [
{ id: 1, name: "张三", age: 20 },
{ id: 2, name: "李四", age: 22 }
];
// 方法1：按需导出
export const getUserById = (id) => {
return userList.find(user => user.id === id) || "用户不存在";
};
// 方法2：默认导出（适合导出单个对象/类）
export default {
userList,
addUser: (user) => {
userList.push({ id: userList.length + 1, ...user });
return "用户添加成功";
}
};
  1. 主程序（es6-main.js）
// 引入用户数据模块（ES6导入）
import userDefault from "./user-data-es6.js";
import { getUserById } from "./user-data-es6.js";
// 使用模块成员
console.log("=== ES6模块化测试 ===");
console.log("所有用户：", userDefault.userList);
console.log("查询ID=2的用户：", getUserById(2));
console.log("添加新用户：", userDefault.addUser({ name: "赵六", age: 23 }));
console.log("添加后所有用户：", userDefault.userList);
  1. 运行命令：node es6-main.js

案例3：Node.js系统模块实战（fs+path）

需求描述

使用fs模块（文件系统）和path模块（路径处理）完成“日志文件管理”功能：创建日志目录、写入日志文件、读取日志内容、拼接日志文件路径，理解系统模块的核心用法。

代码实例

  1. 日志管理脚本（log-manager.js）
// 引入系统模块
const fs = require("fs");
const path = require("path");
// 1. 处理路径（使用path模块）
const logDir = path.join(__dirname, "logs"); // 拼接日志目录路径
const logFilePath = path.join(logDir, "app.log"); // 拼接日志文件路径
console.log("日志目录路径：", logDir);
console.log("日志文件路径：", logFilePath);
// 2. 检查并创建日志目录（fs模块同步操作）
if (!fs.existsSync(logDir)) {
fs.mkdirSync(logDir); // 同步创建目录
console.log("日志目录创建成功！");
}
// 3. 写入日志（fs模块异步操作）
const logContent = `[${new Date().toLocaleString()}] 应用启动成功，Node.js版本：${process.version}\n`;
fs.appendFile(logFilePath, logContent, (err) => {
if (err) throw err;
console.log("日志写入成功！");
// 4. 读取日志内容（写入完成后读取）
fs.readFile(logFilePath, "utf8", (err, data) => {
if (err) throw err;
console.log("\n=== 日志内容 ===");
console.log(data);
});
});
// 5. 读取目录下的文件列表
fs.readdir(logDir, (err, files) => {
if (err) throw err;
console.log("\n日志目录下的文件：", files);
});
  1. 运行命令：node log-manager.js
  2. 验证结果：查看项目根目录是否生成logs文件夹，内部是否有app.log文件，日志内容是否正确。

案例4：第三方模块使用（nodemon+nrm）

需求描述

安装并使用nodemon（自动重启工具）和nrm（npm源管理工具），解决传统开发中“修改代码需手动重启服务”和“npm下载慢”的问题，理解第三方模块的安装与配置。

代码实例

4.1 nodemon使用（自动重启服务）
  1. 全局安装nodemon
npm install -g nodemon
  1. 创建测试脚本（auto-restart.js）
// 简单的HTTP服务脚本
const http = require("http");
const server = http.createServer((req, res) => {
res.writeHead(200, { "Content-Type": "text/plain" });
res.end("Hello Nodemon! 现在时间：" + new Date().toLocaleTimeString());
});
server.listen(3000, () => {
console.log("服务启动成功，访问：http://localhost:3000");
});
  1. 使用nodemon运行
nodemon auto-restart.js
  1. 验证效果：修改auto-restart.js中的响应内容（如把Hello Nodemon!改为Hello Node.js!），观察终端是否自动重启服务，刷新浏览器查看内容是否更新。
4.2 nrm使用（切换npm源）
  1. 全局安装nrm
npm install -g nrm
  1. nrm常用命令（终端执行）
nrm ls                # 查看所有可用的npm源（带*的是当前使用的源）
nrm use taobao        # 切换到淘宝npm源（解决下载慢的问题）
nrm test npm          # 测试npm官方源的响应速度
nrm test taobao       # 测试淘宝源的响应速度
  1. 验证效果：切换源后，执行npm install jquery，观察下载速度是否提升。

案例5：gulp自动化构建（项目实战）

需求描述

使用gulp及其插件完成前端项目的自动化构建，实现以下功能：

  1. 压缩并抽取HTML中的公共代码（如头部导航、底部版权）
  2. 压缩并转换Less为CSS
  3. 压缩并转换ES6为ES5
  4. 复制静态资源（如图片、字体）
  5. 监听文件变化自动重新构建

代码实例

5.1 项目结构
gulp-project/
├── src/                # 源代码目录
│   ├── html/           # HTML文件
│   │   ├── index.html  # 首页
│   │   └── common/     # 公共HTML片段
│   │       ├── header.html
│   │       └── footer.html
│   ├── less/           # Less文件
│   │   └── style.less
│   ├── js/             # ES6代码
│   │   └── main.js
│   └── assets/         # 静态资源
│       └── images/
│           └── logo.png
├── dist/               # 构建后的目录（自动生成）
├── gulpfile.js         # gulp配置文件
└── package.json        # 项目依赖配置
5.2 安装依赖
  1. 初始化package.json
npm init -y
  1. 安装gulp及所需插件
npm install --save-dev gulp gulp-htmlmin gulp-file-include gulp-less gulp-clean-css gulp-babel @babel/core @babel/preset-env gulp-uglify gulp-copy
5.3 gulp配置文件（gulpfile.js）
// 引入gulp及插件
const gulp = require("gulp");
const htmlmin = require("gulp-htmlmin");
const fileInclude = require("gulp-file-include");
const less = require("gulp-less");
const cleanCss = require("gulp-clean-css");
const babel = require("gulp-babel");
const uglify = require("gulp-uglify");
const copy = require("gulp-copy");
// 1. 任务1：处理HTML（抽取公共代码+压缩）
gulp.task("handleHtml", () => {
return gulp
.src("./src/html/*.html") // 源文件路径
.pipe(
fileInclude({
prefix: "@@", // 公共代码引用前缀
basepath: "./src/html/common/" // 公共代码目录
})
) // 抽取公共代码（如@@include('header.html')）
.pipe(
htmlmin({
collapseWhitespace: true, // 压缩空格
removeComments: true // 移除注释
})
) // 压缩HTML
.pipe(gulp.dest("./dist/html/")); // 输出到目标目录
});
// 2. 任务2：处理Less（转换为CSS+压缩）
gulp.task("handleLess", () => {
return gulp
.src("./src/less/*.less")
.pipe(less()) // 转换Less为CSS
.pipe(cleanCss()) // 压缩CSS
.pipe(gulp.dest("./dist/css/"));
});
// 3. 任务3：处理JS（ES6转ES5+压缩）
gulp.task("handleJs", () => {
return gulp
.src("./src/js/*.js")
.pipe(
babel({
presets: ["@babel/preset-env"] // ES6转ES5的预设
})
)
.pipe(uglify()) // 压缩JS
.pipe(gulp.dest("./dist/js/"));
});
// 4. 任务4：复制静态资源
gulp.task("copyAssets", () => {
return gulp
.src("./src/assets/**/*") // 匹配所有静态资源
.pipe(copy("./dist/assets/", { prefix: 2 })) // 复制到目标目录（prefix:2表示去掉src/assets两层目录）
.pipe(gulp.dest("./dist/assets/"));
});
// 5. 任务5：监听文件变化（自动重新构建）
gulp.task("watch", () => {
gulp.watch("./src/html/**/*.html", gulp.series("handleHtml"));
gulp.watch("./src/less/*.less", gulp.series("handleLess"));
gulp.watch("./src/js/*.js", gulp.series("handleJs"));
gulp.watch("./src/assets/**/*", gulp.series("copyAssets"));
});
// 6. 任务6：执行全部构建任务
gulp.task("build", gulp.series("handleHtml", "handleLess", "handleJs", "copyAssets"));
// 默认任务（执行gulp命令时自动运行）
gulp.task("default", gulp.series("build", "watch"));
5.4 编写测试文件
  1. src/html/common/header.html（公共头部）
<header style="text-align: center; padding: 20px; background: #f5f5f5;">
<h1>gulp自动化构建演示</h1>
</header>
  1. src/html/index.html（首页，引用公共代码）
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><title>首页</title><link rel="stylesheet" href="../css/style.css"></head><body>@@include('header.html') <!-- 引用公共头部 --><main style="padding: 20px;"><p>这是首页内容</p><img src="../assets/images/logo.png" alt="logo" width="200"></main>@@include('footer.html') <!-- 引用公共底部 --><script src="../js/main.js"></script></body></html>
  1. src/less/style.less（Less代码）
@primary-color: #1890ff;
body {margin: 0;padding: 0;font-family: Arial, sans-serif;p {color: @primary-color;font-size: 16px;}
}
  1. src/js/main.js（ES6代码）
// ES6箭头函数与模板字符串
const showMsg = (name) => {
console.log(`Hello ${name}! 构建时间：${new Date().toLocaleString()}`);
};
showMsg("gulp");
5.5 运行gulp
  1. 执行构建：npx gulp build（仅执行一次构建）
  2. 自动构建+监听：npx gulp（修改文件后自动重新构建）
  3. 验证结果：查看dist目录，确认HTML、CSS、JS已压缩，Less已转为CSS，ES6已转为ES5，静态资源已复制。

案例6：package.json与项目依赖管理

需求描述

理解package.json文件的结构与作用，掌握项目依赖的安装、查看、删除操作，区分dependencies（生产依赖）和devDependencies（开发依赖）。

代码实例

  1. 查看package.json结构（关键字段说明）
{
"name": "gulp-project",       // 项目名称
"version": "1.0.0",           // 项目版本
"description": "gulp自动化构建演示", // 项目描述
"main": "index.js",           // 入口文件
"scripts": {                  // 自定义脚本
"build": "gulp build",      // 执行npm run build等同于gulp build
"dev": "gulp"               // 执行npm run dev等同于gulp
},
"dependencies": {             // 生产依赖（项目运行时需要）
"jquery": "^3.6.4"          // 示例：安装jquery作为生产依赖
},
"devDependencies": {          // 开发依赖（仅开发时需要）
"gulp": "^4.0.2",
"gulp-htmlmin": "^5.0.1"
},
"keywords": ["gulp", "automation"], // 项目关键词
"author": "",                 // 作者
"license": "ISC"              // 许可证
}
  1. 依赖管理命令（终端执行）
# 1. 安装生产依赖（会写入dependencies）
npm install jquery --save
# 或简写：npm i jquery -S
# 2. 安装开发依赖（会写入devDependencies）
npm install gulp --save-dev
# 或简写：npm i gulp -D
# 3. 查看已安装的依赖
npm list                # 查看所有依赖（包含子依赖）
npm list --depth 0      # 仅查看项目直接依赖（不包含子依赖）
# 4. 删除依赖
npm uninstall jquery    # 删除生产依赖
npm uninstall gulp --save-dev # 删除开发依赖
# 5. 从package.json恢复所有依赖（适合项目迁移）
# （删除node_modules后，执行此命令可重新安装所有依赖）
npm install
  1. 自定义脚本使用：在package.json的scripts字段添加脚本后，执行：
npm run build  # 等同于执行gulp build（构建项目）
npm run dev    # 等同于执行gulp（开发模式，自动监听）

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/960386.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

PHPinclude-labs-level 0-11 WP

PHPinclude-labs-level 0-11 WP

PHPinclude-labs-level 0-11 WP PHPinclude-labs-level 0 WP isset($_GET[wrappers]) ? include($_GET[wrappers]) : ; highlight_file(__FILE__);通过 GET wrappers 来使得 include 把文件包含，这里的包含是指将文件…
阅读更多...
AI元人文：从“真理宫殿”到“可能性土壤”的哲学升华

AI元人文：从“真理宫殿”到“可能性土壤”的哲学升华

AI元人文：从“真理宫殿”到“可能性土壤”的哲学升华 我们正站在一个文明史的奇点上。人工智能（AI）不仅是技术工具，更是一面前所未有的镜子，映照出人类认知、价值与叙事的深层结构。在此背景下，诞生了一种全新的…
阅读更多...
002 vue3-admin项目的目录及文件说明之.npmrc文件

002 vue3-admin项目的目录及文件说明之.npmrc文件

说明 .npmrc 文件是 npm 包管理器的配置文件，用于自定义 npm 的行为。 它可以存在于多个位置，具有不同的优先级。 文件位置与优先级1 项目级：./npmrc（项目根目录） 2 用户级：~/.npmrc（用户主目录） 3 全局级：/e…
阅读更多...
2025年口碑好的T恤定制厂家推荐及采购参考

2025年口碑好的T恤定制厂家推荐及采购参考

2025年口碑好的T恤定制厂家推荐及采购参考行业背景与市场趋势T恤定制行业近年来呈现持续增长态势，根据中国纺织品商业协会最新发布的《2024-2025年中国定制服装市场分析报告》显示，2024年中国T恤定制市场规模已达380…
阅读更多...
Aspire开启云原生开发新纪元：微软推出多语言应用开发平台

Aspire开启云原生开发新纪元：微软推出多语言应用开发平台

微软宣布Aspire现已支持多语言开发，提供统一的云应用开发部署方案。该平台采用代码优先架构，支持C#、Python、JavaScript等多种语言，集成Redis、PostgreSQL等服务，简化分布式应用开发流程。Microsoft ushers in a …
阅读更多...
Matlab实现基于Matrix Pencil算法实现声源信号角度和时间估计

Matlab实现基于Matrix Pencil算法实现声源信号角度和时间估计

Matlab实现基于Matrix Pencil算法实现声源信号角度和时间估计，包含MP、BMP、UMP三种算法实现及性能对比：一、算法框架设计二、核心代码实现 1. 参数设置 %% 系统参数 c = 343; % 声速(m/s) fs = 48000; %…
阅读更多...
2025年口碑好的不锈钢门吸厂家实力及用户口碑排行榜

2025年口碑好的不锈钢门吸厂家实力及用户口碑排行榜

2025年口碑好的不锈钢门吸厂家实力及用户口碑排行榜行业背景与市场趋势随着中国家居建材行业的持续升级，五金配件作为家居系统的"隐形骨架"，其重要性日益凸显。据中国五金制品协会2024年发布的《中国家居五…
阅读更多...
2025年靠谱的三节同步5D滑轨厂家最新推荐排行榜

2025年靠谱的三节同步5D滑轨厂家最新推荐排行榜

2025年靠谱的三节同步5D滑轨厂家最新推荐排行榜行业背景与市场趋势随着家具制造业和工业自动化领域的快速发展，三节同步5D滑轨作为关键功能部件，市场需求持续增长。据中国五金制品协会最新数据显示，2024年国内滑轨市…
阅读更多...
Oracle数据库空间深度回收：从诊断到优化实战指南

Oracle数据库空间深度回收：从诊断到优化实战指南

Oracle数据库空间深度回收：从诊断到优化实战指南随着企业业务数据的持续快速增长，Oracle 数据库占用的磁盘空间常常呈膨胀趋势，这不仅导致备份文件庞大、恢复时间延长，还直接推高了存储成本。本文将系统化解析 Ora…
阅读更多...
2025年比较好的变频器安装用户好评厂家排行

2025年比较好的变频器安装用户好评厂家排行

2025年比较好的变频器安装用户好评厂家排行 行业背景与市场趋势 变频器作为工业自动化领域的核心设备，广泛应用于电机控制、节能改造、智能制造等领域。根据《2024-2025年中国变频器行业市场分析报告》，全球变频器…
阅读更多...
2025年质量好的TC4钛棒厂家最新用户好评榜

2025年质量好的TC4钛棒厂家最新用户好评榜

2025年质量好的TC4钛棒厂家最新用户好评榜行业背景与市场趋势钛及钛合金材料作为21世纪最具发展潜力的金属材料之一，在航空航天、医疗器械、化工设备、海洋工程等领域应用广泛。根据中国有色金属工业协会钛锆铪分会最…
阅读更多...
实用指南：探索大语言模型（LLM）： 大模型应用与对应的硬件选型一览表

实用指南：探索大语言模型（LLM）： 大模型应用与对应的硬件选型一览表

实用指南：探索大语言模型（LLM）： 大模型应用与对应的硬件选型一览表2025-11-09 11:52 tlnshuju 阅读(0) 评论(0) 收藏 举报pre { white-space: pre !important; word-wrap: normal !important; overflow-x: aut…
阅读更多...
使用两个体重秤减少体重测量误差

使用两个体重秤减少体重测量误差

使用两个体重秤减少体重测量误差 问题发现 故事是这样的, 我在PDD花20块大洋买了一个电子体重秤用于测体重, 使用一段时间后发现体重秤可能不准确, 同一时间多次测量每次读数都不相同. 于是又在PDD上花80大洋又买了一个…
阅读更多...
2025年知名的密封圈用户口碑最好的厂家榜

2025年知名的密封圈用户口碑最好的厂家榜

2025年知名的密封圈用户口碑最好的厂家榜行业背景与市场趋势密封圈作为工业领域的关键零部件，在航空航天、汽车制造、石油化工、轨道交通等行业发挥着不可替代的作用。根据《2024-2029年中国密封件行业市场调研与投资…
阅读更多...
2025年比较好的电加热管高评价厂家推荐榜

2025年比较好的电加热管高评价厂家推荐榜

2025年比较好的电加热管高评价厂家推荐榜行业背景与市场趋势电加热管作为工业加热领域的关键元件，近年来随着制造业升级和新能源产业发展，市场需求持续增长。据《2024-2025中国电加热元件行业白皮书》显示，2024年全…
阅读更多...
2025年口碑好的水泥垫块厂家推荐及选购参考榜

2025年口碑好的水泥垫块厂家推荐及选购参考榜

2025年口碑好的水泥垫块厂家推荐及选购参考榜行业背景与市场趋势水泥垫块作为建筑工程中不可或缺的配件，在高铁、桥梁、地铁、隧道等大型工程中发挥着关键作用。根据中国建筑材料联合会最新发布的《2024-2025年中国水…
阅读更多...
嵌入式Linux：线程中信号处理 - 详解

嵌入式Linux：线程中信号处理 - 详解

pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: block !important; font-family: "Consolas", "Monaco", "Courier New", …
阅读更多...
2025年知名的出口蒸笼厂家最新实力排行

2025年知名的出口蒸笼厂家最新实力排行

2025年知名出口蒸笼厂家最新实力排行：数据解读与采购指南 行业背景与市场趋势 全球竹制蒸笼市场规模在2024年达到23.6亿美元（据Global Market Insights数据），预计2025年将保持6.8%的年增长率。中国作为全球最大…
阅读更多...
2025年口碑好的酚醛胶厂家推荐及采购指南

2025年口碑好的酚醛胶厂家推荐及采购指南

2025年口碑好的酚醛胶厂家推荐及采购指南行业背景与市场趋势酚醛树脂胶粘剂作为重要的工业材料，在木材加工、建筑装饰、汽车制造等领域应用广泛。根据中国胶粘剂工业协会最新统计数据显示，2024年我国酚醛胶市场规模已…
阅读更多...
逆向基础--C++数据类型 (02)

逆向基础--C++数据类型 (02)

逆向基础--C++数据类型 (02)一.介绍使用编程语言进行编程时，需要用到各种变量来存储各种信息。变量保留的是它所存储的值的内存位置。这意味着，当您创建一个变量时，就会在内存中保留一些空间。变量的名称可以由字母…
阅读更多...
最新文章

Copyright @ 2022~2023