第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 的价值不只是"写后端"，更重要的是：

1. npm 生态：几乎所有前端工具链（React、Vite、ESLint、TypeScript）都是 npm 包，Node.js 是运行它们的基础
2. 构建工具：Vite、Webpack 都运行在 Node.js 上
3. 脚本自动化：批量重命名文件、数据处理、自动化任务
4. 轻量后端：为前端项目提供简单的 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 文件。

---

📌 本期要点

1. Node.js = V8 + 操作系统接口：让 JS 能读写文件、创建服务器、不依赖浏览器
2. package.json 是项目档案：依赖、版本、脚本命令都在这里
3. dependencies vs devDependencies：生产依赖 vs 开发工具，npm install -D 装工具
4. package-lock.json 必须提交 Git：保证团队依赖一致
5. 用 AI 选包：给出需求场景，让 AI 比较主流选项，节省踩坑时间

---

🔗 下期预告

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

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

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