Ant Design Pro快速入门——Node.js

纯前端菜鸡，只有一些HTML、CSS和JavaScript的基础，最近配合的前端跑路了，想用Ant Design Pro来快速搭建一套中后台来管理数据，只能自己上了，主要自己也想试试水，从后端的视角看前端，整体偏向于实用。

Node.js 核心概念解析

一、模块系统：代码组织的艺术

1.1 模块加载机制

Node.js 采用 CommonJS 模块规范，使用 require 指令进行模块加载：

// 内置模块（无需安装）
const fs = require('fs'); 

// 第三方模块（需npm安装）
const express = require('express');

// 自定义模块（相对路径）
const myModule = require('./my-module');

1.2 模块类型全景图

模块类型	示例	安装方式	加载方式
内置模块	fs, http, path	Node.js 自带	require('模块名')
第三方模块	express, lodash	npm install	require('模块名')
自定义模块	./utils/helper.js	本地创建	require('相对路径')

1.3 模块导出进阶技巧

方法一：导出对象

// logger.js
exports.info = (msg) => console.log(`[INFO] ${msg}`);
exports.error = (err) => console.error(`[ERROR] ${err}`);

// 使用
const logger = require('./logger');
logger.info('Service started');

方法二：类/构造函数导出

// database.js
class Database {
  constructor(config) {
    // 初始化逻辑
  }
}

module.exports = Database;

// 使用
const DB = require('./database');
const db = new DB({ host: 'localhost' });

方法三：ES 模块（ECMAScript Modules）

// math.mjs
export const sum = (a, b) => a + b;
export const PI = 3.14159;

// app.mjs
import { sum, PI } from './math.mjs';
console.log(sum(PI, 10));

最佳实践：在 package.json 中添加 "type": "module" 启用全项目 ES 模块支持

---

二、服务器开发实战

2.1 HTTP 服务器基础模板

const http = require('http');

const server = http.createServer((req, res) => {
  // 请求处理逻辑
  res.writeHead(200, { 
    'Content-Type': 'text/html',
    'X-Powered-By': 'Node.js'
  });
  res.end(`
    <h1>Hello World</h1>
    <p>Request URL: ${req.url}</p>
  `);
});

// 启动监听
server.listen(3000, () => {
  console.log('Server running at http://localhost:3000/');
});

2.2 异步编程演进之路

回调地狱 → Promise → Async/Await

// 传统回调写法
fs.readFile('file1.txt', (err, data1) => {
  if (err) throw err;
  fs.readFile('file2.txt', (err, data2) => {
    // 嵌套层级加深...
  });
});

// Promise 链式调用
fs.promises.readFile('file1.txt')
  .then(data1 => fs.promises.readFile('file2.txt'))
  .then(data2 => { /* 处理数据 */ })
  .catch(err => console.error(err));

// Async/Await 现代写法
async function processFiles() {
  try {
    const [data1, data2] = await Promise.all([
      fs.promises.readFile('file1.txt'),
      fs.promises.readFile('file2.txt')
    ]);
    // 并行处理文件
  } catch (error) {
    // 统一错误处理
  }
}

---

三、开发工具箱揭秘

3.1 REPL 交互式环境

通过命令行工具进入 Node.js 的即时执行环境：

$ node
> const crypto = require('crypto');
> crypto.randomBytes(16).toString('hex')
'7c3c5f5d1a4e8b2e3f6d1c5a8b3e2d7'

常用命令：

• .save filename 保存会话历史
• .load filename 加载文件到 REPL
• .editor 进入多行编辑模式

3.2 调试技巧

内置调试器启动：

node inspect app.js

Chrome DevTools 调试：

node --inspect-brk app.js

在 Chrome 地址栏输入 chrome://inspect 进行可视化调试

---

四、最佳实践清单

1. 模块管理原则

   • 保持模块职责单一（Single Responsibility）
   • 控制模块体积（建议不超过 500 行）
   • 使用 require() 时优先考虑内置模块

2. 错误处理规范

   // 同步错误处理
   try {
     JSON.parse(invalidJson);
   } catch (err) {
     console.error('解析失败:', err);
   }
   
   // 异步错误传播
   async function fetchData() {
     try {
       const res = await fetch('https://api.example.com');
       return res.json();
     } catch (error) {
       throw new Error(`API请求失败: ${error.message}`);
     }
   }
   

3. 性能优化建议

   • 使用 stream 处理大文件
   • 利用 cluster 模块实现多进程
   • 定期进行内存泄漏检查

---

五、生态系统演进

5.1 版本变迁

• CommonJS：Node.js 传统模块系统
• ES Modules：ECMAScript 2015+ 标准模块
• TypeScript：静态类型支持

5.2 现代工作流

graph LR A[代码编写] --> B[TypeScript 编译] B --> C[ESLint 检查] C --> D[Jest 测试] D --> E[Webpack 打包] E --> F[Docker 部署]