Node.js工程化实践:包管理、TypeScript配置与代码质量

Node.js工程化实践:包管理、TypeScript配置与代码质量

预计时间:2 天


🎯 本章目标

搭建一个规范、高效的 TypeScript Node.js 开发环境。


1. ESLint(代码规范)

bash 复制代码
pnpm add -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin
javascript 复制代码
// eslint.config.js(flat config,ESLint 9+)
import tseslint from '@typescript-eslint/eslint-plugin';
import tsparser from '@typescript-eslint/parser';

export default [
  {
    files: ['src/**/*.ts'],
    languageOptions: {
      parser: tsparser,
      parserOptions: { ecmaVersion: 2022, sourceType: 'module' }
    },
    plugins: { '@typescript-eslint': tseslint },
    rules: {
      '@typescript-eslint/no-unused-vars': 'warn',
      '@typescript-eslint/no-explicit-any': 'warn',
      '@typescript-eslint/explicit-function-return-type': 'off',
      'no-console': 'warn',
    }
  }
];

2. Prettier(代码格式化)

bash 复制代码
pnpm add -D prettier
json 复制代码
// .prettierrc
{
  "semi": true,
  "singleQuote": true,
  "trailingComma": "all",
  "printWidth": 100,
  "tabWidth": 2
}
json 复制代码
// package.json scripts
"format": "prettier --write src/**/*.{ts,json}"

3. 调试配置

VS Code 调试

json 复制代码
// .vscode/launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug TS",
      "type": "node",
      "request": "launch",
      "runtimeExecutable": "tsx",
      "args": ["${workspaceFolder}/src/index.ts"],
      "console": "integratedTerminal",
      "skipFiles": ["<node_internals>/**"]
    },
    {
      "name": "Jest Tests",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/node_modules/.bin/vitest",
      "args": ["run"]
    }
  ]
}

代码中断点调试

typescript 复制代码
// 在代码中插入 debugger 语句
async function handleRequest(req, res) {
  debugger; // VS Code 会在这里暂停
  const data = await getData();
  res.json(data);
}

4. 日志系统

bash 复制代码
pnpm add pino  # 高性能日志库(比 console.log 快 5x)
typescript 复制代码
import pino from 'pino';

const logger = pino({
  level: process.env.LOG_LEVEL || 'info',
  transport: process.env.NODE_ENV === 'development'
    ? { target: 'pino-pretty' }
    : undefined
});

logger.info('Server started on port %d', 3000);
logger.error({ err }, 'Failed to connect to database');
logger.debug({ userId: 1 }, 'Processing request');

export default logger;

与 Java 日志对比

Java Node.js
SLF4J / Logback pino / winston
logger.info("msg {}", arg) logger.info('msg %s', arg)
logger.error("msg", e) logger.error({ err: e }, 'msg')

5. 环境变量管理

bash 复制代码
pnpm add dotenv
pnpm add -D @types/node
typescript 复制代码
// src/config/env.ts
import 'dotenv/config';
import { z } from 'zod'; // 用 zod 做运行时校验

const envSchema = z.object({
  NODE_ENV: z.enum(['development', 'production', 'test']).default('development'),
  PORT: z.coerce.number().default(3000),
  DATABASE_URL: z.string().url(),
  JWT_SECRET: z.string().min(32),
  LOG_LEVEL: z.enum(['debug', 'info', 'warn', 'error']).default('info'),
});

const env = envSchema.parse(process.env);

export type Env = z.infer<typeof envSchema>;
export default env;
env 复制代码
# .env
NODE_ENV=development
PORT=3000
DATABASE_URL=postgresql://user:pass@localhost:5432/mydb
JWT_SECRET=your-super-secret-key-here
LOG_LEVEL=debug
gitignore 复制代码
# .gitignore
.env
node_modules/
dist/
*.log

6. 构建工具选择

对比

工具 特点 适用场景
tsc 官方编译器,只转译不打包 库、简单项目
tsup 基于 esbuild,快,零配置 推荐,API 项目
esbuild 极快,底层工具 构建插件开发
swc Rust 写的编译器,极快 大型项目
webpack 功能全面,配置复杂 前端项目

tsup 配置

bash 复制代码
pnpm add -D tsup
json 复制代码
// package.json scripts
"build": "tsup src/index.ts --format esm --dts --clean",
"dev": "tsup src/index.ts --format esm --watch --onSuccess 'node dist/index.js'"

7. Git Hooks(提交规范)

bash 复制代码
pnpm add -D husky lint-staged
pnpm exec husky init
json 复制代码
// package.json
"lint-staged": {
  "src/**/*.ts": [
    "eslint --fix",
    "prettier --write"
  ]
}
bash 复制代码
# .husky/pre-commit
pnpm exec lint-staged

8. 完整开发工作流

bash 复制代码
# 1. 克隆项目
git clone <repo> && cd <repo>

# 2. 安装依赖
pnpm install

# 3. 复制环境变量
cp .env.example .env

# 4. 开发(热重载)
pnpm dev

# 5. 代码检查
pnpm lint
pnpm format

# 6. 构建
pnpm build

# 7. 测试
pnpm test

# 8. 生产部署
pnpm start

下一步:Express基础

相关推荐
二哈赛车手5 小时前
新人笔记---hermes定时功能设计,具体讲解以及可优化点
java·人工智能·笔记·spring·ai·typescript
jktantan6 小时前
每个节点 41 字节:把一棵百万节点树拆进 14 个 typed array
前端·javascript·vue.js·算法·typescript
YIAN8 小时前
RAG 学到最后,我真正学会的不是“检索”,而是让系统知道自己缺什么
langchain·node.js·llm
用户11977079480739 小时前
GitHub 电商开源项目分享:用 sharp 批量出饰品主图,试了裁剪、细节图和色彩配置文件三个坑
前端·node.js
donecoding9 小时前
pnpm 配好了,为什么执行的还是另一份?命令入口与运行时排查
node.js·前端工程化
江屿风9 小时前
【Plain Language Large Model】【从浏览器到全栈:一课精通Node.js三剑客】流食般投喂
笔记·前端框架·npm·node.js·js·npx
Nymph_Zhu10 小时前
vue3+element-plus 文件上传
前端·typescript·vue3·element-plus
QianhangQianping10 小时前
撤销重做不是「存快照」:一个可视化编辑器的Operation 设计
java·前端·数据库·typescript·编辑器·前端架构·撤销重做
SomeOtherTime12 小时前
node.js基础(AI回答)
node.js
用户0934077735141 天前
HarmonyOS WPS Open SDK 工程实践:把 registerApp 做成就绪门禁
typescript·harmonyos