blog of peter

Vite 是当前前端工程里最值得掌握的构建工具之一。它的核心思路很直接：开发时利用浏览器原生 ESM 按需加载，借助高性能预构建和插件体系，把“启动慢、热更新慢、构建慢”这些老问题尽量压到最低。 如果你已经熟悉 Webpack，那么理解 Vite 的方式可以简单粗暴一点：它不是在开发阶段先把整个应用打成一个大包再提供给浏览器，而是让浏览器直接加载源码模块，只有确实需要的依赖和资源才会被处理。这样一来，项目越大，体验差异越明显。 Vite 到底解决了什么 传统打包器在开发模式下通常要做两件事：分析依赖图和重新生成 bundle。项目一旦变大，这个过程就会变慢，热更新也会被牵连。Vite 则把开发期和生产期分开处理：开发期更像一个高性能的本地服务器，生产期才交给 Rollup 做最终打包。 它的优势主要体现在几个方面。 启动快：不用先全量打包，直接启动开发服务器。 HMR 快：热更新只影响变化的模块，而不是整个应用。 配置相对简单：大多数常见场景开箱即用。 插件生态清晰：开发和构建阶段都能通过插件扩展。 对于 Vue、React、Svelte、Solid 这类现代框架，Vite ...

ESLint ESLint 是 JavaScript 和 TypeScript 的代码检查工具，用于发现和修复代码中的问题。 安装与配置 # 安装 ESLint npm install -D eslint # 初始化配置（交互式） npx eslint --init # 或手动安装推荐的配置 npm install -D eslint @eslint/js typescript-eslint ESLint v9+ 扁平配置 ESLint v9 使用新的扁平配置文件 eslint.config.js。 // eslint.config.js import js from '@eslint/js'; import tseslint from 'typescript-eslint'; import vue from 'eslint-plugin-vue'; import react from 'eslint-plugin-react'; import importPlugin from 'eslint-plugin-import'; import unusedImports fro...

NPM (Node Package Manager) NPM 是 Node.js 默认的包管理器，也是世界上最大的软件注册表。 安装与初始化 # 检查版本 npm --version # 或 npm -v # 初始化项目（交互式） npm init # 快速初始化（使用默认值） npm init -y # 安装所有依赖 npm install # 或 npm i 包安装 # 安装到 dependencies（运行时依赖） npm install express npm install lodash axios moment npm i <package-name> # 安装到 devDependencies（开发依赖） npm install --save-dev typescript jest eslint npm install -D @types/node @types/express npm i -D vite # 全局安装（命令行工具） npm install -g nodemon typescript create-react-app npm i -g...

浏览器开发者工具 Chrome DevTools 核心功能 Console 面板 // 基础输出 console.log('普通日志'); console.info('信息日志'); console.warn('警告日志'); console.error('错误日志'); // 格式化输出 console.log('字符串: %s', 'hello'); console.log('数字: %d', 42); console.log('对象: %o', { name: '张三' }); console.log('CSS 样式: %c自定义样式', 'color: red; font-size: 20px;'); // 表格输出 const users = [ { id: 1, name: '张三', age: 25 }, { id: 2, name: '李四', age: 30 }, { id: 3, name: '王五', age: 28 }, ]; console.table(use...

ES6+ 关键特性 解构赋值 解构赋值是一种从数组或对象中提取值并赋给变量的语法糖。 数组解构 // 基本数组解构 const [a, b, c] = [1, 2, 3]; console.log(a, b, c); // 1, 2, 3 // 跳过某些元素 const [first, , third] = [1, 2, 3]; console.log(first, third); // 1, 3 // 剩余元素 const [head, ...tail] = [1, 2, 3, 4, 5]; console.log(head); // 1 console.log(tail); // [2, 3, 4, 5] // 默认值 const [x = 10, y = 20] = [5]; console.log(x, y); // 5, 20 // 交换变量 let m = 1, n = 2; [m, n] = [n, m]; console.log(m, n); // 2, 1 // 嵌套解构 const nested = [1, [2, 3], 4]; const [a,...

性能优化概述 前端性能优化的目标是提升用户体验，让页面加载更快、响应更及时、交互更流畅。 核心 Web 指标 (Core Web Vitals) LCP (Largest Contentful Paint): 最大内容绘制，衡量加载性能，应在 2.5 秒内 INP (Interaction to Next Paint): 交互到下次绘制，衡量响应性，应在 200 毫秒内 CLS (Cumulative Layout Shift): 累积布局偏移，衡量视觉稳定性，应小于 0.1 性能优化原则 减少请求数量：合并资源、使用雪碧图 减少资源体积：压缩、Gzip、Tree Shaking 优化加载顺序：关键资源优先加载 利用缓存：浏览器缓存、CDN 缓存 延迟加载：非关键资源延迟加载 优化渲染：减少重排重绘 代码分割与懒加载 路由级别的代码分割 // Vue Router 懒加载 import { createRouter, createWebHistory } from 'vue-router'; const router = createRouter(&...

Vite 简介 Vite 是下一代前端构建工具，由 Vue.js 的作者尤雨溪开发。它利用浏览器原生 ES 模块支持，提供极速的开发服务器启动和热模块替换（HMR）。 核心优势 极速启动：不需要打包，直接提供原生 ESM 模块 闪电般 HMR：模块更新速度快，不受应用规模影响 丰富的功能：开箱支持 TypeScript、JSX、CSS 等 优化的构建：基于 Rollup，高度可配置 插件系统：兼容 Rollup 插件生态 快速开始 创建项目 # 使用 npm npm create vite@latest my-app # 使用 yarn yarn create vite my-app # 使用 pnpm pnpm create vite my-app # 使用 bun bun create vite my-app # 指定模板 npm create vite@latest my-app -- --template vue-ts npm create vite@latest my-app -- --template react-ts npm create vite@la...

基础类型系统 TypeScript 是 JavaScript 的超集，提供了静态类型检查，帮助在编译时发现错误。 基本类型 类型 关键字 说明 示例 布尔值 boolean 真/假值 let isDone: boolean = false 数字 number 整数、浮点数、BigInt let decimal: number = 42 大整数 bigint 任意精度的整数 let bigNumber: bigint = 9007199254740991n 字符串 string 文本数据 let name: string = '张三' 数组 T[] 或 Array<T> 相同类型的元素集合 let numbers: number[] = [1, 2, 3] 元组 [T, U] 固定长度和类型的数组 let tuple: [string, number] = ['年龄', 25] 枚举 enum 一组命名的常量 enum Color { Red, Green, Blue } 任意类型 any 任意类型（尽量避免） let anyV...

Codex CLI 是 OpenAI 推出的命令行 AI 编程助手，它可以直接在终端中运行，帮助你完成各种编程任务。与 ChatGPT 网页版不同，Codex CLI 可以直接读写文件、执行命令，并深度理解你的项目代码。本文将详细介绍 Codex CLI 的安装、配置和使用技巧。 1. 安装和配置 1.1 安装 Codex CLI Codex CLI 可以通过 npm 安装： # 全局安装 npm install -g @openai/codex # 或使用 yarn yarn global add @openai/codex 也可以使用 Homebrew 安装（macOS）： brew install codex 1.2 配置 API 密钥 安装完成后，需要配置 OpenAI API 密钥： # 设置环境变量 export OPENAI_API_KEY="your-api-key-here" 或者在配置文件中设置： # 创建配置目录 mkdir -p ~/.config/codex # 创建配置文件 cat > ~/.config/codex/config.json <...