第08期 | Node.js入门：前端的后端能力-171主机测评

第08期 | Node.js入门：前端的后端能力

系列：AI前端工程师·从零基础到拿到Offer 上期回顾：学会了 Git，代码有了版本控制和远程备份。今天我们迈出一大步——用 JavaScript 写服务端代码。

🎯 今天你将学会

理解 Node.js 是什么，以及为什么前端工程师需要它
掌握 npm 包管理：安装、使用、理解 package.json
能写简单的 Node.js 脚本（文件操作、HTTP 请求）
用 AI 帮你选包、读文档，快速上手任何 npm 包

📖 核心知识

一、Node.js 是什么

在 Node.js 出现之前，JavaScript 只能在浏览器里运行——它有 window、document，但没有文件系统、没有网络服务器的能力。

2009年，Ryan Dahl 把 Chrome 的 V8 引擎单独拿出来，加上文件系统、网络等操作系统接口，创造了 Node.js。

一句话：Node.js 让 JavaScript 可以运行在服务器上（脱离浏览器）。

浏览器里的 JS：操作 DOM、处理用户交互、发 API 请求
Node.js 里的 JS：读写文件、创建 HTTP 服务、操作数据库

对于前端工程师来说，Node.js 的价值不只是"写后端"，更重要的是：

npm 生态：几乎所有前端工具链（React、Vite、ESLint、TypeScript）都是 npm 包，Node.js 是运行它们的基础

构建工具：Vite、Webpack 都运行在 Node.js 上

脚本自动化：批量重命名文件、数据处理、自动化任务

轻量后端：为前端项目提供简单的 API 服务

二、安装和第一个脚本

# 安装 Node.js：推荐用 nvm 管理版本
# macOS/Linux：
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
nvm install –lts # 安装最新 LTS 版本
nvm use –lts

# Windows：直接从 https://nodejs.org 下载安装包

# 验证安装
node –version # v20.x.x
npm –version # 10.x.x

第一个 Node.js 脚本：

// hello.js
console.log("Hello from Node.js!");

// 和浏览器 JS 的不同：没有 window/document，有 process 和 __dirname
console.log("当前目录：", __dirname);
console.log("Node版本：", process.version);
console.log("操作系统：", process.platform);

node hello.js
# 输出：Hello from Node.js!
# 当前目录：/Users/你/my-project

三、Node.js 内置模块

Node.js 自带了一批核心模块，不需要安装：

// fs：文件系统操作
const fs = require('fs');

// 读文件（同步版本，适合脚本）
const content = fs.readFileSync('./data.txt', 'utf-8');
console.log(content);

// 写文件
fs.writeFileSync('./output.txt', '写入的内容', 'utf-8');

// 读取目录
const files = fs.readdirSync('./');
console.log(files); // ['index.html', 'styles.css', 'main.js']

// 异步版本（适合服务器，不阻塞）
fs.readFile('./data.txt', 'utf-8', (err, data) => {
if (err) throw err;
console.log(data);
});

// path：路径处理（解决 Windows/Mac 路径分隔符问题）
const path = require('path');

path.join('/users', 'admin', 'project'); // /users/admin/project
path.resolve('./src', 'index.js'); // 绝对路径
path.extname('index.html'); // '.html'
path.basename('/path/to/file.txt'); // 'file.txt'
path.dirname('/path/to/file.txt'); // '/path/to'

// http：创建简单服务器
const http = require('http');

const server = http.createServer((req, res) => {
// req：请求对象（url、method、headers等）
// res：响应对象

res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
res.end('<h1>Hello from Node.js Server!</h1>');
});

server.listen(3000, () => {
console.log('服务器运行在 http://localhost:3000');
});

现代 Node.js（v12+）也支持 ES Module 语法：

// 在 package.json 中加 "type": "module"，或文件命名为 .mjs
import fs from 'fs';
import path from 'path';

// CommonJS（老语法，require）vs ES Module（import）
// 实际项目两种都会遇到，认识它们就行

四、npm：JavaScript 的包管理器

npm（Node Package Manager）是世界上最大的软件注册表，超过200万个包。你几乎能找到任何功能的现成实现。

初始化一个项目：

# 在项目目录里运行
npm init # 交互式创建 package.json
npm init -y # 快速创建（所有选项用默认值）

package.json 是项目的"身份证"，记录项目名称、版本、依赖等：

{
"name": "my-blog",
"version": "1.0.0",
"description": "AI前端工程师博客",
"main": "index.js",
"scripts": {
"start": "node server.js",
"dev": "node –watch server.js",
"build": "vite build",
"test": "jest"
},
"dependencies": {
"express": "^4.18.2"
},
"devDependencies": {
"vite": "^5.0.0"
}
}

依赖的两种类型：

dependencies：生产环境需要（如 React、Express）
devDependencies：只在开发时需要（如 ESLint、Vite、Jest）

常用 npm 命令：

# 安装依赖
npm install express # 安装到 dependencies
npm install -D vite # 安装到 devDependencies（-D 是 –save-dev 的缩写）
npm install # 安装 package.json 里所有依赖

# 卸载
npm uninstall lodash

# 运行脚本
npm run dev
npm run build
npm start # start 可以省略 run

# 查看已安装的包
npm list –depth=0

# 更新包
npm update
npm outdated # 查看哪些包有新版本

package-lock.json 是什么？

它锁定了每个包的精确版本，保证团队成员 npm install 后得到完全一样的依赖。必须提交到 Git，不能加入 .gitignore。

五、理解版本号：语义化版本（SemVer）

npm 包版本号格式：主版本.次版本.补丁版本（如 4.18.2）

^4.18.2（脱字符）→ 允许安装 4.x.x 的最新版，不升级主版本
~4.18.2（波浪号）→ 只允许 4.18.x，补丁更新
4.18.2（无符号）→ 精确匹配，不允许任何升级

主版本升级（4→5）：有破坏性改动（Breaking Change），可能不兼容
次版本升级（18→19）：新增功能，向后兼容
补丁升级（2→3）：bug修复，向后兼容

六、实战：写一个文章批量处理脚本

下面这个脚本读取课程目录下的所有 Markdown 文章，统计字数，生成汇总报告：

// count-words.js
import fs from 'fs';
import path from 'path';
import { fileURLToPath } from 'url';

const __dirname = path.dirname(fileURLToPath(import.meta.url));
const articlesDir = path.join(__dirname, 'ai-frontend-course');

function countWords(text) {
// 中文字符每个算1字，英文单词用空格分隔计算
const chineseChars = (text.match(/[\\u4e00-\\u9fa5]/g) || []).length;
const englishWords = (text.match(/[a-zA-Z]+/g) || []).length;
return chineseChars + englishWords;
}

function analyzeArticle(filePath) {
const content = fs.readFileSync(filePath, 'utf-8');
const lines = content.split('\\n');
const title = lines[0].replace('# ', '').trim();
const wordCount = countWords(content);
const codeBlocks = (content.match(/```/g) || []).length / 2;

return { title, wordCount, codeBlocks: Math.floor(codeBlocks) };
}

// 读取所有 .md 文件
const files = fs.readdirSync(articlesDir)
.filter(f => f.endsWith('.md'))
.sort();

console.log('='.repeat(60));
console.log('AI前端工程师课程·文章统计');
console.log('='.repeat(60));

let totalWords = 0;
const stats = files.map(file => {
const filePath = path.join(articlesDir, file);
const result = analyzeArticle(filePath);
totalWords += result.wordCount;
return { file, …result };
});

stats.forEach(s => {
console.log(`\\n📄 ${s.file}`);
console.log(` 标题：${s.title}`);
console.log(` 字数：${s.wordCount.toLocaleString()}`);
console.log(` 代码块：${s.codeBlocks} 个`);
});

console.log('\\n' + '='.repeat(60));
console.log(`共 ${stats.length} 篇文章，总字数：${totalWords.toLocaleString()}`);
console.log(`平均字数：${Math.round(totalWords / stats.length).toLocaleString()}`);

node count-words.js

七、常见实用 npm 包

虽然现代前端开发很多工具都有了，但了解这些包很有用：

# HTTP 服务器（比 http 模块简单很多）
npm install express

# HTTP 客户端（发请求，Node 里没有 fetch 之前的替代品）
npm install axios

# 日期处理
npm install dayjs

# 命令行参数解析
npm install commander

# 文件操作增强
npm install fs-extra

# 彩色命令行输出
npm install chalk

# 进度条
npm install ora

# 跨平台 shell 脚本
npm install shelljs

🤖 AI协作实战

场景：用 AI 帮我选包和读文档

需求：我需要解析 Markdown 文件，渲染成 HTML。

我给 AI 的 Prompt：

我需要在 Node.js 脚本里解析 Markdown 文件，转换成 HTML。
npm 上有哪些库可以做这个？请：
1. 列出 2-3 个主流选项
2. 比较它们的下载量、维护活跃度、功能差异
3. 推荐最适合我这个场景（轻量脚本，不是大型应用）的选项
4. 给出安装命令和最小可用的示例代码

AI 的回答：

推荐对比：

1. marked（周下载量 ~3000万）
– 最轻量，API 简单
– 适合：快速脚本、静态网站生成
– 安装：npm install marked

2. markdown-it（周下载量 ~2500万）
– 功能更完整，支持插件扩展
– 适合：需要定制化的场景
– 安装：npm install markdown-it

3. unified + remark（周下载量 ~5000万）
– 功能最强大，整个解析器生态
– 学习曲线较陡，适合大型项目

推荐：marked —— 你的场景是轻量脚本，marked 足够且最简单。

示例代码：

import { marked } from 'marked';
import fs from 'fs';

const markdown = fs.readFileSync('./article.md', 'utf-8');
const html = marked.parse(markdown);
console.log(html);

// 自定义选项
marked.setOptions({
breaks: true, // 换行符转成 <br>
gfm: true // 支持 GitHub Flavored Markdown
});

AI 还主动提醒了安全注意事项：

注意：marked 默认不会对 HTML 内容转义，如果 Markdown 来自用户输入，记得配合 DOMPurify（浏览器）或 sanitize-html（Node.js）防止 XSS。

这种"我没问但 AI 告诉我"的信息，正是用 AI 读文档的价值所在。

💻 动手练习

练习1（简单）：创建一个 Node.js 脚本，读取你的博客项目目录，列出所有 HTML、CSS、JS 文件的文件名和大小（单位：KB），按文件大小降序排列。

练习2（中等）：用 http 模块创建一个简单的文件服务器：

访问 http://localhost:3000/index.html 返回对应文件内容
访问不存在的文件返回 404
根据文件扩展名设置正确的 Content-Type

练习3（挑战）：安装 marked 包，写一个脚本把 Markdown 文章转换为完整的 HTML 文件（带 CSS 样式，可直接在浏览器预览）。批量处理 ai-frontend-course/ 目录下的所有 .md 文件，生成对应的 .html 文件。

📌 本期要点

Node.js = V8 + 操作系统接口：让 JS 能读写文件、创建服务器、不依赖浏览器

package.json 是项目档案：依赖、版本、脚本命令都在这里

dependencies vs devDependencies：生产依赖 vs 开发工具，npm install -D 装工具

package-lock.json 必须提交 Git：保证团队依赖一致

用 AI 选包：给出需求场景，让 AI 比较主流选项，节省踩坑时间

🔗 下期预告

第09期：开发环境与工具链

VS Code 不是只能用来写代码的编辑器——配置好的 VS Code 能实时发现 bug、自动格式化、智能补全。下期我们配置一套完整的开发环境：ESLint（代码检查）+ Prettier（代码格式化）+ VS Code 插件 + 编辑器设置。

AI协作点：ESLint 的规则配置复杂，我们用 AI 来解释每条规则的意思，以及你项目里为什么要开启或关闭某条规则。如果你没有苹果电脑，需要上传ios到APPStore可以访问以下网站 iPA上传工具 – IPA解析与AppStore提交

第08期 | Node.js入门：前端的后端能力