本手册为前端开发者提供了 Vite、Webpack、Rollup、Node.js 和 TypeScript 的常用 API 速查,涵盖配置文件、开发服务器、生产构建、模块解析、插件使用等核心功能。无论是快速搭建开发环境、优化构建流程,还是处理模块依赖和类型定义,本手册都能为您提供清晰的指导和实用的参考,助您提升开发效率,轻松应对复杂项目需求。
Vite 常用 API
Vite是一个现代化的前端构建工具和开发服务器,专为Vue.js和React等现代Web应用程序框架而设计。它的名称来源于法语单词"vitesse",意为"速度",因为Vite的主要目标是提供快速的开发体验。点击查看
Vite 常用 API 注解
├── 配置文件 (vite.config.js)
│ ├── root # 项目根目录
│ ├── base # 公共基础路径
│ ├── mode # 模式(development/production)
│ ├── plugins # 插件配置
│ ├── resolve # 模块解析配置
│ ├── server # 开发服务器配置
│ ├── build # 生产构建配置
│ ├── optimizeDeps # 依赖优化配置
│ ├── css # CSS 配置
│ ├── json # JSON 配置
│ ├── assetsInclude # 静态资源处理
│ ├── logLevel # 日志级别
│ ├── clearScreen # 是否清屏
├── 开发服务器 (server)
│ ├── port # 端口号
│ ├── host # 主机名
│ ├── open # 自动打开浏览器
│ ├── proxy # 代理配置
│ ├── cors # 跨域配置
│ ├── hmr # 热更新配置
│ ├── watch # 监听文件变化
│ ├── middlewareMode # 中间件模式
├── 生产构建 (build)
│ ├── outDir # 输出目录
│ ├── assetsDir # 静态资源目录
│ ├── assetsInlineLimit # 资源内联大小限制
│ ├── cssCodeSplit # CSS 代码分割
│ ├── sourcemap # 是否生成 SourceMap
│ ├── minify # 是否压缩代码
│ ├── rollupOptions # Rollup 配置
│ ├── commonjsOptions # CommonJS 配置
│ ├── lib # 库模式配置
│ ├── manifest # 是否生成 manifest 文件
├── 依赖优化 (optimizeDeps)
│ ├── include # 需要预构建的依赖
│ ├── exclude # 排除的依赖
│ ├── entries # 入口文件
│ ├── keepNames # 是否保留名称
├── 插件 (plugins)
│ ├── vite-plugin-vue # Vue 支持
│ ├── vite-plugin-react # React 支持
│ ├── vite-plugin-legacy # 传统浏览器支持
│ ├── vite-plugin-pwa # PWA 支持
│ ├── vite-plugin-html # HTML 模板支持
│ ├── vite-plugin-mock # Mock 数据支持
│ ├── vite-plugin-compression # 文件压缩支持
│ ├── vite-plugin-inspect # 构建过程检查
├── 模块解析 (resolve)
│ ├── alias # 路径别名
│ ├── extensions # 自动解析扩展名
│ ├── mainFields # 主字段配置
├── CSS 配置 (css)
│ ├── modules # CSS 模块配置
│ ├── postcss # PostCSS 配置
│ ├── preprocessorOptions # 预处理器配置
├── 其他
│ ├── define # 定义全局变量
│ ├── envDir # 环境变量目录
│ ├── envPrefix # 环境变量前缀
│ ├── logLevel # 日志级别
│ ├── clearScreen # 是否清屏说明:
配置文件:Vite 的核心配置项。
开发服务器:配置开发服务器的行为。
生产构建:配置生产环境的构建行为。
依赖优化:优化依赖预构建的配置。
插件:Vite 生态中常用的插件。
模块解析:定义模块解析规则。
CSS 配置:配置 CSS 的处理方式。
其他:Vite 的其他常用功能和特性。
Webpack 常用 API 注解
Webpack是一个现代的JavaScript应用程序的静态模块打包工具。它主要用于将应用程序的代码和资源打包成单个或多个文件,以便于部署到生产环境。Webpack通过构建依赖关系图,将所有模块打包成一个或多个bundle,从而优化应用程序的加载性能。点击查看
Webpack 常用 API 注解
├── 配置对象
│ ├── entry # 入口文件
│ ├── output # 输出配置
│ ├── module # 模块处理规则
│ ├── plugins # 插件配置
│ ├── resolve # 模块解析配置
│ ├── devServer # 开发服务器配置
│ ├── mode # 模式(development/production)
│ ├── optimization # 优化配置
│ ├── devtool # SourceMap 配置
│ ├── externals # 外部依赖
│ ├── target # 构建目标(web/node)
├── 输出配置 (output)
│ ├── path # 输出目录
│ ├── filename # 输出文件名
│ ├── publicPath # 公共路径
│ ├── chunkFilename # 代码分割文件名
│ ├── library # 库导出名称
│ ├── libraryTarget # 库导出格式
├── 模块处理 (module)
│ ├── rules # 模块处理规则
│ │ ├── test # 匹配文件类型
│ │ ├── use # 使用的 loader
│ │ ├── exclude # 排除目录
│ │ ├── include # 包含目录
├── 插件 (plugins)
│ ├── HtmlWebpackPlugin # 生成 HTML 文件
│ ├── MiniCssExtractPlugin # 提取 CSS 文件
│ ├── CleanWebpackPlugin # 清理构建目录
│ ├── DefinePlugin # 定义全局变量
│ ├── HotModuleReplacementPlugin # 热模块替换
│ ├── CopyWebpackPlugin # 复制静态文件
│ ├── BundleAnalyzerPlugin # 打包分析
├── 解析配置 (resolve)
│ ├── alias # 路径别名
│ ├── extensions # 自动解析扩展名
│ ├── modules # 模块查找目录
├── 开发服务器 (devServer)
│ ├── contentBase # 静态文件目录
│ ├── port # 端口号
│ ├── hot # 热更新
│ ├── open # 自动打开浏览器
│ ├── proxy # 代理配置
├── 优化配置 (optimization)
│ ├── minimize # 是否压缩代码
│ ├── minimizer # 压缩工具配置
│ ├── splitChunks # 代码分割配置
│ ├── runtimeChunk # 运行时代码分割
├── 常用 Loader
│ ├── babel-loader # 使用 Babel 转译 JS
│ ├── css-loader # 处理 CSS 文件
│ ├── style-loader # 注入 CSS 到 DOM
│ ├── sass-loader # 处理 SCSS 文件
│ ├── file-loader # 处理文件资源
│ ├── url-loader # 处理 URL 资源
│ ├── ts-loader # 处理 TypeScript 文件
├── 其他
│ ├── devtool # SourceMap 配置
│ ├── watch # 监听文件变化
│ ├── stats # 构建统计信息
│ ├── performance # 性能优化配置
│ ├── cache # 缓存配置说明:
配置对象:Webpack 的核心配置项。
输出配置:定义输出文件的路径、名称和格式。
模块处理:定义如何处理不同类型的模块。
插件:Webpack 生态中常用的插件。
解析配置:定义模块解析规则。
开发服务器:配置开发服务器的行为。
优化配置:优化构建输出的配置。
常用 Loader:Webpack 生态中常用的 Loader。
其他:Webpack 的其他常用功能和特性。
Rollup 常用 API
Rollup 是一个 JavaScript 模块打包器,用于将多个模块(如 ES6 模块)组合成一个或多个文件,以便在浏览器或 Node.js 环境中使用。与其他打包工具(如 Webpack 和 Parcel)相比,Rollup 在某些方面具有独特的特点和优势。点击查看
Rollup 常用 API 注解
├── 输入配置
│ ├── input # 入口文件路径
│ ├── external # 外部依赖
│ ├── plugins # 插件数组
│ ├── onwarn # 自定义警告处理
│ ├── cache # 缓存配置
│ ├── watch # 监听模式配置
├── 输出配置
│ ├── file # 输出文件路径
│ ├── format # 输出格式(es, cjs, iife, umd, amd)
│ ├── name # UMD/IIFE 全局变量名
│ ├── globals # 外部依赖的全局变量名
│ ├── sourcemap # 是否生成 sourcemap
│ ├── banner # 文件顶部注释
│ ├── footer # 文件底部注释
│ ├── intro # 打包内容前插入代码
│ ├── outro # 打包内容后插入代码
│ ├── paths # 模块 ID 映射
│ ├── chunkFileNames # 代码分割文件名模板
│ ├── manualChunks # 手动代码分割配置
├── 插件 API
│ ├── name # 插件名称
│ ├── buildStart # 构建开始钩子
│ ├── resolveId # 解析模块 ID 钩子
│ ├── load # 加载模块钩子
│ ├── transform # 转换模块钩子
│ ├── buildEnd # 构建结束钩子
│ ├── generateBundle # 生成包钩子
│ ├── writeBundle # 写入包钩子
│ ├── watchChange # 监听文件变化钩子
├── 工具函数
│ ├── rollup.rollup # 打包函数
│ ├── rollup.watch # 监听模式函数
│ ├── rollup.generate # 生成包函数
│ ├── rollup.write # 写入包函数
│ ├── rollup.defineConfig # 定义配置函数
│ ├── rollup.version # Rollup 版本号
├── 常用插件
│ ├── @rollup/plugin-node-resolve # 解析 node_modules 模块
│ ├── @rollup/plugin-commonjs # 转换 CommonJS 模块
│ ├── @rollup/plugin-babel # 使用 Babel 转换代码
│ ├── @rollup/plugin-typescript # 支持 TypeScript
│ ├── @rollup/plugin-json # 导入 JSON 文件
│ ├── @rollup/plugin-alias # 路径别名
│ ├── @rollup/plugin-replace # 替换字符串
│ ├── @rollup/plugin-terser # 代码压缩
│ ├── @rollup/plugin-eslint # ESLint 检查
│ ├── @rollup/plugin-strip # 删除调试代码
├── 其他
│ ├── sourcemap # 生成 sourcemap
│ ├── treeshake # 启用 TreeShaking
│ ├── minify # 代码压缩
│ ├── watch # 监听文件变化
│ ├── chunk # 代码分割
│ ├── bundle # 打包输出说明:
输入配置:定义 Rollup 的入口文件、外部依赖、插件等。
输出配置:定义输出文件的格式、路径、全局变量等。
插件 API:Rollup 插件开发的核心钩子函数。
工具函数:Rollup 提供的常用工具函数。
常用插件:Rollup 生态中常用的插件。
其他:Rollup 的常用功能和特性。
Node.js 常用 API
Node.js是一个基于Chrome V8 JavaScript引擎的开源、跨平台的运行时环境。它允许开发者使用JavaScript来编写服务器端应用程序,实现了将JavaScript从浏览器端扩展到服务器端的能力。点击查看
Node.js 常用 API 注解
├── 文件系统 (fs)
│ ├── fs.readFile # 读取文件
│ ├── fs.writeFile # 写入文件
│ ├── fs.appendFile # 追加文件内容
│ ├── fs.unlink # 删除文件
│ ├── fs.mkdir # 创建目录
│ ├── fs.rmdir # 删除目录
│ ├── fs.readdir # 读取目录内容
│ ├── fs.stat # 获取文件/目录信息
│ ├── fs.watch # 监听文件/目录变化
├── 路径处理 (path)
│ ├── path.join # 拼接路径
│ ├── path.resolve # 解析绝对路径
│ ├── path.basename # 获取路径的最后一部分
│ ├── path.dirname # 获取路径的目录部分
│ ├── path.extname # 获取文件扩展名
│ ├── path.parse # 解析路径为对象
│ ├── path.format # 从对象生成路径
├── HTTP 模块 (http)
│ ├── http.createServer # 创建 HTTP 服务器
│ ├── http.request # 发起 HTTP 请求
│ ├── http.get # 发起 GET 请求
│ ├── server.listen # 监听端口
│ ├── server.on # 监听事件
├── 事件模块 (events)
│ ├── EventEmitter # 事件发射器
│ ├── emitter.on # 监听事件
│ ├── emitter.emit # 触发事件
│ ├── emitter.once # 一次性监听事件
│ ├── emitter.removeListener # 移除事件监听
├── 流模块 (stream)
│ ├── stream.Readable # 可读流
│ ├── stream.Writable # 可写流
│ ├── stream.Duplex # 双工流
│ ├── stream.Transform # 转换流
│ ├── readable.pipe # 管道操作
│ ├── writable.write # 写入数据
├── 操作系统 (os)
│ ├── os.platform # 获取操作系统平台
│ ├── os.cpus # 获取 CPU 信息
│ ├── os.totalmem # 获取总内存
│ ├── os.freemem # 获取空闲内存
│ ├── os.hostname # 获取主机名
│ ├── os.userInfo # 获取用户信息
├── 工具模块 (util)
│ ├── util.promisify # 回调函数转 Promise
│ ├── util.inspect # 对象格式化输出
│ ├── util.format # 格式化字符串
│ ├── util.types # 类型检查
├── 子进程 (child_process)
│ ├── child_process.exec # 执行命令
│ ├── child_process.spawn # 创建子进程
│ ├── child_process.fork # 创建 Node.js 子进程
│ ├── child_process.execFile # 执行文件
├── 网络模块 (net)
│ ├── net.createServer # 创建 TCP 服务器
│ ├── net.connect # 创建 TCP 连接
│ ├── server.listen # 监听端口
│ ├── socket.write # 发送数据
├── 其他常用模块
│ ├── process # 进程对象
│ ├── Buffer # 二进制数据处理
│ ├── console # 控制台输出
│ ├── timers # 定时器
│ ├── url # URL 解析
│ ├── querystring # 查询字符串解析说明:
文件系统 (fs):用于文件读写和目录操作。
路径处理 (path):用于路径的解析和拼接。
HTTP 模块 (http):用于创建 HTTP 服务器和客户端。
事件模块 (events):用于事件驱动编程。
流模块 (stream):用于处理流式数据。
操作系统 (os):用于获取系统信息。
工具模块 (util):提供实用工具函数。
子进程 (child_process):用于创建和管理子进程。
网络模块 (net):用于创建 TCP 服务器和客户端。
其他常用模块:包括进程管理、二进制数据处理、定时器等。
TypeScript 常用 API
TypeScript是一种由Microsoft开发和维护的开源编程语言,它是JavaScript的超集。换句话说,TypeScript扩展了JavaScript,并在其基础上添加了静态类型检查和一些新的特性。TypeScript代码最终会被编译为普通的JavaScript代码,从而可以在任何支持JavaScript的环境中运行。点击查看
TypeScript 常用 API 注解
├── 基础类型
│ ├── boolean # 布尔类型
│ ├── number # 数字类型
│ ├── string # 字符串类型
│ ├── array # 数组类型
│ ├── tuple # 元组类型
│ ├── enum # 枚举类型
│ ├── any # 任意类型
│ ├── void # 无返回值类型
│ ├── null # 空值类型
│ ├── undefined # 未定义类型
│ ├── never # 永不存在的值类型
│ ├── object # 对象类型
├── 高级类型
│ ├── union # 联合类型
│ ├── intersection # 交叉类型
│ ├── literal # 字面量类型
│ ├── type # 类型别名
│ ├── interface # 接口
│ ├── class # 类
│ ├── generic # 泛型
│ ├── keyof # 索引类型查询
│ ├── typeof # 类型查询
│ ├── indexed # 索引访问类型
│ ├── mapped # 映射类型
│ ├── conditional # 条件类型
│ ├── infer # 类型推断
├── 类与接口
│ ├── class # 类定义
│ ├── constructor # 构造函数
│ ├── extends # 继承
│ ├── implements # 实现接口
│ ├── public # 公共属性
│ ├── private # 私有属性
│ ├── protected # 受保护属性
│ ├── readonly # 只读属性
│ ├── static # 静态属性
│ ├── abstract # 抽象类
│ ├── get # 访问器
│ ├── set # 设置器
│ ├── interface # 接口定义
│ ├── extends # 接口继承
├── 函数
│ ├── function # 函数定义
│ ├── arrow # 箭头函数
│ ├── parameter # 参数类型
│ ├── return # 返回值类型
│ ├── optional # 可选参数
│ ├── default # 默认参数
│ ├── rest # 剩余参数
│ ├── overload # 函数重载
│ ├── this # 函数上下文
├── 模块
│ ├── export # 导出
│ ├── import # 导入
│ ├── default # 默认导出
│ ├── namespace # 命名空间
│ ├── require # 动态导入
├── 装饰器
│ ├── class # 类装饰器
│ ├── method # 方法装饰器
│ ├── property # 属性装饰器
│ ├── parameter # 参数装饰器
│ ├── accessor # 访问器装饰器
├── 工具类型
│ ├── Partial # 部分属性可选
│ ├── Required # 所有属性必选
│ ├── Readonly # 只读属性
│ ├── Record # 键值对类型
│ ├── Pick # 选择属性
│ ├── Omit # 忽略属性
│ ├── Exclude # 排除类型
│ ├── Extract # 提取类型
│ ├── NonNullable # 排除 null 和 undefined
│ ├── ReturnType # 函数返回值类型
│ ├── InstanceType # 实例类型
│ ├── ThisType # 上下文类型
├── 其他
│ ├── as # 类型断言
│ ├── is # 类型谓词
│ ├── declare # 声明
│ ├── namespace # 命名空间
│ ├── module # 模块
│ ├── global # 全局变量
│ ├── lib # 内置库
│ ├── config # 配置文件
│ ├── compilerOptions # 编译选项
│ ├── tsconfig.json # 配置文件说明:
基础类型:TypeScript 提供的基本数据类型。
高级类型:TypeScript 提供的高级类型操作。
类与接口:TypeScript 的类和接口定义及使用。
函数:TypeScript 的函数定义及使用。
模块:TypeScript 的模块化支持。
装饰器:TypeScript 的装饰器功能。
工具类型:TypeScript 提供的实用工具类型。
其他:TypeScript 的其他常用功能和配置。
总结
🔥 前端开发者的终极速查宝典! 🔥
本手册一次性打包 Vite、Webpack、Rollup、Node.js 和 TypeScript 的常用 API,覆盖开发、构建、优化全流程!无论你是新手还是老手,都能快速找到配置秘籍,解决开发难题!
💡 亮点一览:
- • Vite:秒级热更新,配置一目了然!
- • Webpack:从入门到进阶,打包优化全掌握!
- • Rollup:轻量高效,库开发必备神器!
- • Node.js:文件操作、网络请求、子进程,统统搞定!
- • TypeScript:类型系统、高级特性,代码更健壮!
🚀 效率飙升,告别加班! 🚀
无论是搭建环境、调试代码,还是优化性能,这本手册都是你的“开发加速器”!
📌 适合人群:
- • 前端开发者
- • 全栈工程师
- • 库/工具开发者
- • 任何想提升开发效率的编程爱好者!
🌟 你的高效开发,从这里开始! 🌟
速速收藏,随时查阅,轻松搞定前端开发!
















