你还不会写 vite 插件吗?没关系,我教你啊!

更新日期: 2022-06-06阅读: 1.6k标签: Vite

前言

大家好,我是易师傅,在现如今 vite 工具快开始盛行之下,我们是不是可以去做一件有意义的事呢,比如写一个 vite 插件,你觉得怎么样?

刚好我们可以趁 vite 插件 生态还未很成熟阶段,做一个让自己顺心,让领导赏心,让社区开心的插件,与之携手共进。

如果大家对 vite 感兴趣可以去看看专栏: 《Vite 从入门到精通》

通过本文你可以学到

如何创建一个 vite 插件模板

vite 插件的 各个钩子作用

vite 插件的 钩子执行顺序

如何写一个自己的插件

了解 vite 插件

1. 什么是 vite 插件

vite 其实就是一个由原生 ES Module 驱动的新型 Web 开发前端构建工具。

vite 插件 就可以很好的扩展 vite 自身不能做到的事情,比如 文件图片的压缩、 对 commonjs 的支持、 打包进度条 等等。

2. 为什么要写 vite 插件

相信在座的每位同学,到现在对 webpack 的相关配置以及常用插件都了如指掌了吧;

vite 作为一个新型的前端构建工具,它还很年轻,也有很多扩展性,那么为什么我们不趁现在与它一起携手前进呢?做一些于你于我于大家更有意义的事呢?

快速体验

要想写一个插件,那必须从创建一个项目开始,下面的 vite 插件通用模板 大家以后写插件可以直接clone使用;

插件通用模板 github:体验入口

插件 github:体验入口

建议包管理器使用优先级:pnpm > yarn > npm > cnpm

长话短说,直接开干 ~

创建 vite 插件通用模板

1. 初始化

1.1 创建一个文件夹并且初始化:初始化按照提示操作即可

mkdir vite-plugin-progress && cd vite-plugin-progress && pnpm init 

1.2 安装 typescript

pnpm i typescript @types/node -D

1.3 配置 tsconfig.json

{
  "compilerOptions": {
    "module": "ESNext",
    "target": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "declaration": true,
    "noUnusedLocals": true,
    "esModuleInterop": true,
    "outDir": "dist",
    "lib": ["ESNext"],
    "sourceMap": false,
    "noEmitOnError": true,
    "noImplicitAny": false
  },
  "include": [
    "src/*",
    "*.d.ts"
  ],
  "exclude": [
    "node_modules",
    "examples",
    "dist"
  ]
}

1.4 安装 vite

// 进入 package.json
{
    ...
    "devDependencies": {
        "vite": "*"
    }
    ...
}

2. 配置 eslint 和 prettier(可选)

安装 eslint

pnpm i eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev

配置 .eslintrc:配置连接

安装 prettier (可选)

pnpm i prettier eslint-config-prettier eslint-plugin-prettier --save-dev

配置 .prettierrc :配置连接

3. 新增 src/index.ts 入口

import type { PluginOption } from 'vite';

export default function vitePluginTemplate(): PluginOption {
  return {
    // 插件名称
    name: 'vite-plugin-template',

    // pre 会较于 post 先执行
    enforce: 'pre', // post

    // 指明它们仅在 'build' 或 'serve' 模式时调用
    apply: 'build', // apply 亦可以是一个函数

    config(config, { command }) {
      console.log('这里是config钩子');
    },

    configResolved(resolvedConfig) {
      console.log('这里是configResolved钩子');
    },

    configureServer(server) {
      console.log('这里是configureServer钩子');
    },

    transformIndexhtml(html) {
      console.log('这里是transformIndexHtml钩子');
    },
  }
}

其中的 vite 插件函数钩子会在下面详细详解 ~

到这里,那么我们的基本模版就建好了,但是我们现在思考一下,我们应该怎么去运行这个插件呢?

那么我们就需要创建一些 examples 例子来运行这个代码了;

4. 创建 examples 目录

我这里创建了三套项目 demo,大家直接 copy 就行了,这里就不详细介绍了

vite-react:github.com/jeddygong/vite-templates/tree/master/vite-plugin-template/examples/vite-react

vite-vue2:github.com/jeddygong/vite-templates/tree/master/vite-plugin-template/examples/vite-vue2

vite-vue3:github.com/jeddygong/vite-templates/tree/master/vite-plugin-template/examples/vite-vue3 

如果你的插件需要多跑一些 demo,自行创建项目即可;

那么下面我们就需要配置 examples 下的项目与当前根目录的插件做一个联调了(下面以 examples/vite-vue3 为例)。

5. 配置 examples/vite-vue3 项目

修改 examples/vite-vue3/package.json

{
    ...
    "devDependencies": {
        ...
        "vite": "link:../../node_modules/vite",
        "vite-plugin-template": "link:../../"
    }
}

上面意思就是说:

要把 examples/vite-vue3 项目中的 vite 版本与根目录 vite-plugin-template 的版本一致;

同时要把 examples/vite-vue3 项目中的 vite-plugin-template 指向你当前根目录所开发的插件;

引入插件: examples/vite-vue3/vite.config.ts

import template from 'vite-plugin-template';

export default defineConfig({
    ...
    plugins: [vue(), template()],
    ...
});

安装: cd examples/vite-vue3 && pnpm install

cd examples/vite-vue3 && pnpm install

注意: examples/vite-vue2 和 examples/vite-react 的配置与这一致

思考:

到这里,我们再思考一下,我们把 examples/vite-vue3 中的项目配置好了,但是我们应该怎么去运行呢?

直接去 examples/vite-vue3 目录下运行 pnpm run build 或者 pnpm run dev ?

这样显然是不能运行成功的,因为我们的根目录下的 src/index.ts 是没法直接运行的,所以我们需要把 .ts 文件转义成 .js 文件;

那么我们怎么处理呢?

那么我们不得不去试着用用一个轻小且无需配置的工具 tsup 了。

6. 安装 tsup 配置运行命令

tsup 是一个轻小且无需配置的,由 esbuild 支持的构建工具;

同时它可以直接把 .ts、.tsx 转成不同格式 esm、cjs、iife 的工具;

安装 tsup

pnpm i tsup -D

在根目录下的 package.json 中配置

{
  ...
  "scripts": {
    "dev": "pnpm run build -- --watch --ignore-watch examples",
    "build": "tsup src/index.ts --dts --format cjs,esm",
    "example:react": "cd examples/vite-react && pnpm run build",
    "example:vue2": "cd examples/vite-vue2 && pnpm run build",
    "example:vue3": "cd examples/vite-vue3 && pnpm run build"
  },
  ...
}

7. 开发环境运行

开发环境运行:实时监听文件修改后重新打包(热更新)

pnpm run dev

运行 examples 中的任意一个项目(以 vite-vue3 为例)

pnpm run example:vue3

注意:

如果你的插件只会在 build 时运行,那就设置 "example:vue3": "cd examples/vite-vue3 && pnpm run build" ;

反之就运行 pnpm run dev

输出:


到这里你就可以 边开发边运行 了,尤雨溪看了都说爽歪歪 ~

8. 发布

安装 bumpp 添加版本控制与 tag

pnpm i bumpp -D

配置 package.json

{
  ...
  "scripts": {
    ...
    "prepublishOnly": "pnpm run build",
    "release": "npx bumpp --push --tag --commit && pnpm publish",
  },
  ...
}

开发完插件后运行发布

# 第一步
pnpm run prepublishOnly

# 第二步
pnpm run release

那么到这里,我们的 vite 插件模板 就已经写好了,大家可以直接克隆 vite-plugin-template 模板 使用;

如果你对 vite 的插件钩子 和 实现一个真正的 vite 插件 感兴趣可以继续往下面看;

vite 的插件钩子 hooks 们

1. vite 独有的钩子

enforce :值可以是pre 或 post , pre 会较于 post 先执行;

apply :值可以是 build 或 serve 亦可以是一个函数,指明它们仅在 build 或 serve 模式时调用;

config(config, env) :可以在 vite 被解析之前修改 vite 的相关配置。钩子接收原始用户配置 config 和一个描述配置环境的变量env;

configResolved(resolvedConfig) :在解析 vite 配置后调用。使用这个钩子读取和存储最终解析的配置。当插件需要根据运行的命令做一些不同的事情时,它很有用。

configureServer(server) :主要用来配置开发服务器,为 dev-server (connect 应用程序) 添加自定义的中间件;

transformIndexHtml(html) :转换 index.html 的专用钩子。钩子接收当前的 HTML 字符串和转换上下文;

handleHotUpdate(ctx):执行自定义HMR更新,可以通过ws往客户端发送自定义的事件;

2. vite 与 rollup 的通用钩子之构建阶段

options(options) :在服务器启动时被调用:获取、操纵Rollup选项,严格意义上来讲,它执行于属于构建阶段之前;

buildStart(options):在每次开始构建时调用;

resolveId(source, importer, options):在每个传入模块请求时被调用,创建自定义确认函数,可以用来定位第三方依赖;

load(id):在每个传入模块请求时被调用,可以自定义加载器,可用来返回自定义的内容;

transform(code, id):在每个传入模块请求时被调用,主要是用来转换单个模块;

buildEnd():在构建阶段结束后被调用,此处构建结束只是代表所有模块转义完成;

3. vite 与 rollup 的通用钩子之输出阶段

outputOptions(options):接受输出参数;

renderStart(outputOptions, inputOptions):每次 bundle.generate 和 bundle.write 调用时都会被触发;

augmentChunkHash(chunkInfo):用来给 chunk 增加 hash;

renderChunk(code, chunk, options):转译单个的chunk时触发。rollup 输出每一个chunk文件的时候都会调用;

generateBundle(options, bundle, isWrite):在调用 bundle.write 之前立即触发这个 hook;

writeBundle(options, bundle):在调用 bundle.write后,所有的chunk都写入文件后,最后会调用一次 writeBundle;

closeBundle():在服务器关闭时被调用

4. 插件钩子函数 hooks 的执行顺序(如下图)


5. 插件的执行顺序

别名处理Alias

用户插件设置enforce: 'pre'

vite 核心插件

用户插件未设置enforce

vite 构建插件

用户插件设置enforce: 'post'

vite 构建后置插件(minify, manifest, reporting)

手撸一个 vite 插件

下面以 vite 打包进度条 插件为例;


插件地址:github 如果您觉得不错欢迎 star 

该插件已被 vite 官方收集至官方文档:链接地址

因为文章的重点不在于这个插件的详细实现过程,所以本文只会贴上源代码供大家参考,详细介绍会在下一篇文章中讲解,请大家拭目以待吧!

inde.ts

import type { PluginOption } from 'vite';
import colors from 'picocolors';
import progress from 'progress';
import rd from 'rd';
import { isExists, getCacheData, setCacheData } from './cache';

type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
type Merge<M, N> = Omit<M, Extract<keyof M, keyof N>> & N;

type PluginOptions = Merge<
    ProgressBar.ProgressBarOptions,
    {
        /**
         * total number of ticks to complete
         * @default 100
         */
        total?: number;

        /**
         * The format of the progress bar
         */
        format?: string;
    }
>;

export default function viteProgressBar(options?: PluginOptions): PluginOption {

    const { cacheTransformCount, cacheChunkCount } = getCacheData()

    let bar: progress;
    const stream = options?.stream || process.stderr;
    let outDir: string;
    let transformCount = 0
    let chunkCount = 0
    let transformed = 0
    let fileCount = 0
    let lastPercent = 0
    let percent = 0

    return {
        name: 'vite-plugin-progress',

        enforce: 'pre',

        apply: 'build',

        config(config, { command }) {
            if (command === 'build') {
                config.logLevel = 'silent';
                outDir = config.build?.outDir || 'dist';

                options = {
                    width: 40,
                    complete: '\u2588',
                    incomplete: '\u2591',
                    ...options
                };
                options.total = options?.total || 100;

                const transforming = isExists ? `${colors.magenta('Transforms:')} :transformCur/:transformTotal | ` : ''
                const chunks = isExists ? `${colors.magenta('Chunks:')} :chunkCur/:chunkTotal | ` : ''
                const barText = `${colors.cyan(`[:bar]`)}`

                const barFormat =
                    options.format ||
                    `${colors.green('Bouilding')} ${barText} :percent | ${transforming}${chunks}Time: :elapseds`

                delete options.format;
                bar = new progress(barFormat, options as ProgressBar.ProgressBarOptions);



                // not cache: Loop files in src directory
                if (!isExists) {
                    const readDir = rd.readSync('src');
                    const reg = /\.(vue|ts|js|jsx|tsx|css|scss||sass|styl|less)$/gi;
                    readDir.forEach((item) => reg.test(item) && fileCount++);
                }
            }
        },

        transform(code, id) {
            transformCount++
            
            // not cache
            if(!isExists) {
                const reg = /node_modules/gi;

                if (!reg.test(id) && percent < 0.25) {
                    transformed++
                    percent = +(transformed / (fileCount * 2)).toFixed(2)
                    percent < 0.8 && (lastPercent = percent)
                  }
          
                if (percent >= 0.25 && lastPercent <= 0.65) {
                    lastPercent = +(lastPercent + 0.001).toFixed(4)
                } 
            }

            // go cache
            if (isExists) runCachedData()
            
            bar.update(lastPercent, {
                transformTotal: cacheTransformCount,
                transformCur: transformCount,
                chunkTotal: cacheChunkCount,
                chunkCur: 0,
            })

            return {
                code,
                map: null
            };
        },

        renderChunk() {
            chunkCount++

            if (lastPercent <= 0.95) 
                isExists ? runCachedData() : (lastPercent = +(lastPercent + 0.005).toFixed(4))

            bar.update(lastPercent, {
                transformTotal: cacheTransformCount,
                transformCur: transformCount,
                chunkTotal: cacheChunkCount,
                chunkCur: chunkCount,
            })

            return null
        },

        closeBundle() {
            // close progress
            bar.update(1)
            bar.terminate()

            // set cache data
            setCacheData({
                cacheTransformCount: transformCount,
                cacheChunkCount: chunkCount,
            })

            // out successful message
            stream.write(
                `${colors.cyan(colors.bold(`Build successful. Please see ${outDir} directory`))}`
            );
            stream.write('\n');
            stream.write('\n');
        }
    };

    /**
     * run cache data of progress
     */
    function runCachedData() {
        
        if (transformCount === 1) {
            stream.write('\n');
            
            bar.tick({
                transformTotal: cacheTransformCount,
                transformCur: transformCount,
                chunkTotal: cacheChunkCount,
                chunkCur: 0,
            })
        }

        transformed++
        percent = lastPercent = +(transformed / (cacheTransformCount + cacheChunkCount)).toFixed(2)
    }
}

cache.ts

import fs from 'fs';
import path from 'path';

const dirPath = path.join(process.cwd(), 'node_modules', '.progress');
const filePath = path.join(dirPath, 'index.json');

export interface ICacheData {
    /**
     * Transform all count
     */
    cacheTransformCount: number;

    /**
     * chunk all count
     */
    cacheChunkCount: number
}

/**
 * It has been cached
 * @return boolean
 */
export const isExists = fs.existsSync(filePath) || false;

/**
 * Get cached data
 * @returns ICacheData
 */
export const getCacheData = (): ICacheData => {
    if (!isExists) return {
        cacheTransformCount: 0,
        cacheChunkCount: 0
    };

    return JSON.parse(fs.readFileSync(filePath, 'utf8'));
};

/**
 * Set the data to be cached
 * @returns 
 */
export const setCacheData = (data: ICacheData) => {
    !isExists && fs.mkdirSync(dirPath);
    fs.writeFileSync(filePath, JSON.stringify(data));
};
作者:易师傅
链接:https://juejin.cn/post/7103165205483356168

链接: https://fly63.com/article/detial/11652

Vite使Vue CLI过时了吗?

Vue 生态系统中有一个名为 Vite 的新构建工具,它的开发服务器比 Vue CLI 快 10-100 倍。这是否意味着 Vue CLI 已经过时了?在本文中,我将比较这两种构建工具

在vite2和Vue3中配置Mockjs

在 Vite2 与 Vue3 中使用Mockjs时有一些官方文档没有提到的注意点,特意做此记录。MockJS 依赖的安装,在 package.json 中设置环境变量,在 vite.config.js 中添加 mockjs 插件

Vite开发环境搭建

Vite现在可谓是炙手可热,可能很多小伙伴还没有使用过Vite,但是我相信大多数小伙伴已经在使用Vite了,因为是太香了有没有。可能在使用过程中很多东西Vite不是配置好的,并不像Vue-cli配置的很周全,那么今天就说一下如何配置开发环境

Vite开发快速入门

Vite (法语意为快速的,发音 /vit/) 是一种面向现代浏览器的一个更轻、更快的前端构建工具,能够显著提升前端的开发体验。除了Vite外,前端著名的构建工具还有Webpack和Gulp。目前,Vite已经发布了Vite2,Vite全新的插件架构、丝滑的开发体验

Vite状态管理

Vite是一种新型前端构建工具,能够显著提升前端开发体验。它主要由两部分组成:一个开发服务器,它基于 原生 ES 模块 提供了 丰富的内建功能,如速度快到惊人的 模块热更新(HMR)。

vue3.x+ts+vite2环境变量配置

默认 dev 环境下使用 .env.development 环境变量配置, build 环境下使用 .env.production ,所以不需要在 package.json 中再指定模式了

vue3 vite 系统标题 系统名称统一配置

想要统一配置系统名称 或者其他的,需要在vue3中使用 vite 的环境变量;vite 的环境变量 需要创建两个文件(和 vite.config.js 文件同一目录)

新朝旧将 vite和webpack煮酒论英雄

我们见证了 webpack、Rollup 和 Parcel 等工具的变迁,它们极大地改善了前端开发者的开发体验。但当我们开始构建越来越大型的应用时,通常需要很长时间才能启动开发服务器

Vite多页面应用配置&使用vite-plugin-html向html模板注入数据或标签

在开发过程中,简单地导航或链接到 /nested/ - 将会按预期工作,与正常的静态文件服务器表现一致。也就是说,如果你的文件夹有如下层级:

使用Vite快速构建前端React项目

Vite是一种面向现代浏览器的一个更轻、更快的前端构建工具,能够显著提升前端开发体验。除了Vite外,前端著名的构建工具还有Webpack和Gulp。目前,Vite已经发布了Vite3

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!