vite插件需要兼容rollup和esbuild的插件机制,虽然vite兼容大部分rollup插件,但不是所有钩子都支持,本小节介绍下vite中的钩子及插件开发流程。 插件命名 对于rollup插件的命名有两种,一种是rollup-plugin-xxx,这种是社区通用的,不是官方团队开发的,一种是@rollup/xxx,这种是官方的插件,@rollup代表组织,个人还不能申请。
本小节介绍下rollup和esbuild的基础用法,我们都知道vite本身使用的rollup打包,vite的插件也和rollup的插件机制相吻合;esbuild是用于在开发环境中对文件进行处理,也有自己的声明周期钩子函数,由于对文件的分割和css支持还不太友好,暂未应用到打包环节。 rollup rollup是成熟的构建工具, 开源类库优先选择,以esm标准为目标的...
可以理解为 Vite 用 Esbuild 来干活,干完活就不用它了,换成 Rollup 进行打包。 Vite 之所以能开发和生产使用两套不同的构建工具,是因为他在dev环境下,其实是通过插件容器,除了使用 Vite 独有特性的插件,其他插件会进行模拟Rollup 插件行为,等到打包的时候,会将这一块替换成Rollup打包,所以其实不管是开发环境还是...
https://cn.vitejs.dev/guide/build.html#library-mode 详细设置 https://cn.vitejs.dev/config/#build-lib 技术栈 vite rollup 打包方式 vue-cli 自带的是 webpack 的打包方式,打出的包体积有点大,而 vite 自带的是 rollup 的打包方式,这种方式打包的体积就非常小,官网也有一些使用说明,所以学会之后还是比...
针对上面模拟的组件库,下面给出rollup打包的基本配置。输出格式为es module,且打包后的产物保留文件结构。 importjsonfrom"@rollup/plugin-json";//导入json文件importterserfrom"@rollup/plugin-terser";//压缩代码importclearfrom"rollup-plugin-clear";//清空指定文件夹importresolvefrom"@rollup/plugin-node-resolve"...
Rollup 插件是一个对象,对象具有一个或多个属性、build构建钩子和output generation输出生成钩子。 插件应该作为一个包分发,它导出一个可以传入特定选项对象的函数,并返回一个对象。 下面是一个简单的例子: // rollup-plugin-my-example.jsexport default function myExample () {return {name: 'my-example',resolv...
为什么会出现 Vite?在过去的 Webpack、Rollup 等构建工具的时代,我们所写的代码一般都是基于 ES Module 规范,在文件之间通过import和export形成一个很大的依赖图。 这些构建工具在本地开发调试的时候,也都会提前把你的模块先打包成浏览器可读取的 js bundle,虽然有诸如路由懒加载等优化手段,但懒加载并不代表懒构建...
esBuild 经过精心的设计，将代码 parse、代码生成等过程实现完全并行处理。性能至上原则 esBuild 只提供现代 Web 应用最小的功能集合，所以其架构复杂度相对较小，更容易将性能做到极致在 webpack、rollup 这类工具中， 我们习惯于使用多种第三方工作来增强工程能力。比如：babel、eslint、less 等。在代码经过多个工具...
目前vite2.x是基于rollup打包的,而不是esbuild,详见这里 使用rollup-plugin-visualizer进行打包分析,打包之后,会在根目录默认生成一个stats.html文件 使用vite-plugin-imagemin进行图片压缩。每次打包都会压缩一次,会占用构建耗时,有值得优化的空间,此处先不作讨论 ...
vue-cli 自带的是 webpack 的打包方式,打出的包体积有点大,而 vite 自带的是 rollup 的打包方式,这种方式打包的体积就非常小,官网也有一些使用说明,所以学会之后还是比较很方便的。 vite 的库项目可以分为两类:(我自己分的) 一个是纯js的项目,不带HTML; ...