vite

Rollup 系统学习

Rollup 介绍

开源类库优先选择
以ESM标准为目标的构建工具
Tree Shaking

基本命令

# 帮助
rollup --help

# 版本号
rollup --version

# -i 输入文件 --file 输出文件 --format 输出类型
rollup -i index --file dist.js --format cjs

rollup 插件

Hook

通用配置

include
exclude

三个官方插件

alias
babel
replace

常用插件

Replace
CommonJS
Node resolve
Eslint
image
strip
wasm

ESBuild使用教程

Vite 插件系统

如果插件不使用 Vite 特有的钩子，可以作为兼容Rollup的插件来实现，推荐使用Rollup插件名称约定

Rollup 插件应该有一个带有rollup-plugin-前缀、语义清晰的名称
在 package.json 中包含 rollup-plugin和vite-plugin关键字

这样，插件也可以用于纯 Rollup或基于WMR的项目

对于 Vite 专属的插件：

Vite 插件应该有一个带 vite-plugin- 前缀、语义清晰的名称。
在 package.json 中包含 vite-plugin 关键字。
在插件文档增加一部分关于为什么本插件是一个 Vite 专属插件的详细说明（如，本插件使用了 Vite 特有的插件钩子）。

如果你的插件只适用于特定的框架，它的名字应该遵循以下前缀格式：

vite-plugin-vue- 前缀作为 Vue 插件
vite-plugin-react-前缀作为 React 插件
vite-plugin-svetle-前缀作为 Svetle 插件

通用钩子

在开发中，Vite 开发服务器会创建一个插件容器来调用 Rollup 构建钩子，与 Rollup 如出一辙。

以下钩子在服务器启动时被调用：

options
buildStart

以下钩子会在每个传入模块请求时被调用：

resolveId
load
transform

以下钩子在服务器关闭时被调用

buildEnd
closeBundle

请注意：moduleParsed钩子在开发中是不会被调用的，因为 Vite 为了性能会避免完整的 AST 解析

Vite 独有钩子

Vite 插件也可以体从钩子来服务于特定的 Vite 目标。这些钩子会被 Rollup 忽略。

config
configResolved
configureServer
transformIndexHtml
handleHotUpdate

插件顺序

一个 Vite 插件可以额外指定一个 enforce 属性（类似于 webpack 加载器）来调整它的应用顺序。enforce的值可以时 pre或post。解析后的插件将按照以下顺序排列：

Alias
带有enforce: 'pre'的用户插件
Vite 核心插件
没有 enforce 值的用户插件
Vite 构建用的插件
带有enforce: 'post'的用户插件
Vite 后置构建插件（最小化，manifest，报告）

Wuxiao.io's Blog