本手册为前端开发者提供了 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:类型系统、高级特性,代码更健壮!

🚀 效率飙升,告别加班! 🚀
无论是搭建环境、调试代码,还是优化性能,这本手册都是你的“开发加速器”!

📌 适合人群:

  • • 前端开发者
  • • 全栈工程师
  • • 库/工具开发者
  • • 任何想提升开发效率的编程爱好者!

🌟 你的高效开发,从这里开始! 🌟
速速收藏,随时查阅,轻松搞定前端开发!