nodejs-development

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Node.js Development

Node.js开发

Expert knowledge for modern JavaScript/TypeScript development with focus on high-performance tooling and frameworks.

具备现代JavaScript/TypeScript开发的专业知识，专注于高性能工具链与框架。

Core Expertise

核心技术领域

Modern JavaScript Tooling

Bun: Primary JavaScript runtime and package manager (25x faster than npm)
Vite: Lightning-fast build tool with HMR and optimized production builds
TypeScript: Type-safe development with modern configurations
ESM: Modern module syntax and tree-shaking optimization

现代JavaScript工具链

Bun: 主流JavaScript运行时与包管理器（速度比npm快25倍）
Vite: 支持热模块替换（HMR）的极速构建工具，可生成优化的生产构建产物
TypeScript: 具备现代配置的类型安全开发方案
ESM: 现代模块语法与摇树优化

Key Capabilities

关键能力

Bun Runtime & Package Management

Use
```
bun install
```
for dependency installation and
```
bun.lock
```
for reproducible builds
Implement
```
bun run
```
for script execution and
```
bun dev
```
/
```
bun build
```
patterns
Configure
```
bunfig.toml
```
for project-specific Bun settings
Leverage Bun's native TypeScript support and built-in bundler

Vue 3 & Modern Frontend

Vue 3: Composition API, script setup, and reactive patterns
Pinia: State management with TypeScript support
Vuetify: Material Design components
Vite: Fast development server with instant HMR

TypeScript Excellence

Configure TypeScript with strict mode and modern target settings
Implement comprehensive type definitions for Vue components and stores
Use TypeScript with Vite for optimal development experience
Apply advanced TypeScript patterns for robust applications

Testing & Quality Assurance

Vitest: Fast unit testing framework with native TypeScript support
Playwright: End-to-end testing with browser automation
Biome: Code quality and formatting (unified, fast)

Debugging

Chrome DevTools: Advanced debugging for browser and Node.js
Node.js Inspector: Built-in debugging with breakpoints and profiling
Heap Snapshots: Memory leak detection and heap analysis
Performance Profiling: CPU profiling, flame graphs, bottleneck identification
Vue DevTools: Component tree, state inspection, performance monitoring

Bun运行时与包管理

使用
```
bun install
```
安装依赖，通过
```
bun.lock
```
实现可复现的构建
采用
```
bun run
```
执行脚本，遵循
```
bun dev
```
/
```
bun build
```
工作流
配置
```
bunfig.toml
```
以适配项目专属的Bun设置
利用Bun的原生TypeScript支持与内置打包器

Vue 3与现代前端

Vue 3: 组合式API、
```
<script setup>
```
语法糖与响应式开发模式
Pinia: 支持TypeScript的状态管理方案
Vuetify: Material Design组件库
Vite: 具备即时热模块替换的快速开发服务器

TypeScript进阶实践

配置开启严格模式与现代目标版本的TypeScript环境
为Vue组件与状态仓库实现全面的类型定义
结合TypeScript与Vite以获得最佳开发体验
应用高级TypeScript模式构建健壮的应用

测试与质量保障

Vitest: 原生支持TypeScript的极速单元测试框架
Playwright: 基于浏览器自动化的端到端测试工具
Biome: 统一、高效的代码质量检查与格式化工具

调试

Chrome DevTools: 针对浏览器与Node.js的高级调试工具
Node.js Inspector: 内置调试功能，支持断点与性能分析
堆快照: 内存泄漏检测与堆内存分析
性能分析: CPU分析、火焰图、性能瓶颈定位
Vue DevTools: 组件树查看、状态检查、性能监控

Essential Commands

常用命令

bash

undefined

bash

undefined

Bun-first workflow

Bun优先工作流

bun create vite my-app --template vue-ts # Create Vue 3 + TypeScript project cd my-app && bun install # Install dependencies

bun create vite my-app --template vue-ts # 创建Vue 3 + TypeScript项目 cd my-app && bun install # 安装依赖

Development

开发阶段

bun dev # Start dev server bun build # Build for production bun run check # Run Biome lint + format bun run test # Run tests

bun dev # 启动开发服务器 bun build # 构建生产版本 bun run check # 运行Biome代码检查与格式化 bun run test # 执行测试

Debugging

调试

node --inspect script.js # Node.js debugging bun --inspect script.ts # Bun debugging node --prof script.js # CPU profiling

undefined

node --inspect script.js # Node.js调试 bun --inspect script.ts # Bun调试 node --prof script.js # CPU性能分析

undefined

Best Practices

最佳实践

Project Structure

Organize Vue 3 projects with clear component, store, and router separation
Configure
```
vite.config.ts
```
with optimizations
Implement proper error boundaries and loading states
Use Vue 3's Teleport and Suspense for advanced UI patterns

Performance & Security

Implement proper CSP headers and security configurations
Optimize images and assets with Vite's asset handling
Use lazy loading and code splitting
Apply proper form validation and sanitization

Type Safety

typescript

// Modern type annotations (TypeScript 5.0+)
function processData(
    items: string[],
    config: Record<string, number>,
    optional?: string | null
): [boolean, string] {
    return [true, "success"];
}

For detailed debugging patterns, Vue 3 component structure, Vite configuration, production debugging, and framework integration, see REFERENCE.md.

项目结构

为Vue 3项目清晰划分组件、状态仓库与路由目录
配置
```
vite.config.ts
```
以实现性能优化
实现完善的错误边界与加载状态
使用Vue 3的Teleport与Suspense实现高级UI模式

性能与安全

配置合适的CSP头部与安全设置
利用Vite的资源处理能力优化图片与静态资源
采用懒加载与代码分割技术
实现完善的表单验证与内容 sanitization

类型安全

typescript

// 现代类型注解（TypeScript 5.0+）
function processData(
    items: string[],
    config: Record<string, number>,
    optional?: string | null
): [boolean, string] {
    return [true, "success"];
}

如需了解详细的调试模式、Vue 3组件结构、Vite配置、生产环境调试及框架集成内容，请查看REFERENCE.md。