从零发布自己的Vite插件

• 专栏地址：前端编译和工程化
• 本文作者：AFine970

背景

最近有幸参与到了一个 Webpack 升级 Vite 的项目，升级过程中踩了不少坑，也花了不少时间，最后终于升级完成。期间的一个迁移点，涉及到 Vite 插件的编写，看了官方文档几遍，终于将插件搞定。

接下来，楼主就和大家分享：如何编写你的第一个 Vite 插件。

知识准备

Vite 官方文档详细地介绍了插件的工作机制、插件的各种钩子、插件的执行顺序。

建议大家先把官网文档的插件知识过一遍，做一个基础的知识准备，我们再开始编写自己的第一个插件。

插件的实现

我们在做移动端网页的时候，经常有需要在我们的手机上预览页面。平常我们的做法就是将 dev 启动的服务的地址复制到我们的手机上，再进行打开，步骤比较繁琐。

我们来试着将这步骤优化一下，在控制台直接输出地址的二维码，手机直接扫码就能打开网页，这是不是更加高效率了呢 😎

那么，我们就来实现这样的一个 Vite 插件

代码实现

1. 新建项目

我们按照 vite 的官方预定来命名我们的插件，使用 typescript 来编写我们的的插件

$ mkdir vite-plugin-qrcode-terminal
$ cd vite-plugin-qrcode-terminal
$ npm init -y
$ yarn add vite typescript
$ tsc --init

如何在控制台输出二维码？我们依赖qrcode-terminal依赖包的能力

$ yarn add qrcode-terminal

略过一些额外的步骤，我们直接开始编写插件的核心代码

2. 代码实现

首先我们先把我们的插件的主要内容编写完毕

// src/main.ts

export function vitePluginQrcodeTerminal(params: PluginOption = {}): Plugin {
  let config: ResolvedConfig;
  return {
    // 插件名称
    name: 'vite-plugin-qrcode-terminal',
    // 本地服务时运行
    apply: 'serve',
    // 拿到最后解析完成的配置项
    configResolved(resolvedConfig) {
      config = resolvedConfig;
    },
    // 在configureServer钩子执行我们的方法
    configureServer(server) {
      return () => {
        server.middlewares.use((req, res, next) => {
          createQrcode(params, config.server);
          next();
        });
      };
    },
  };
}

其实再完善我们的核心函数createQrcode

function createQrcode(
  params: PluginOption,
  server: ServerOptions & ResolvedServerOptions
) {
  const { small } = params;
  const content = getInputContent(params, server);
  // 根据用户配置生成完整的url数组
  const urls = renderUrl(content, server);
  urls.forEach((each) => {
  // 生成二维码
    qrcode.generate(each, { small: small ?? true }, (qrcode) => {
      console.log('------');
      console.log(each);
      console.log(qrcode);
      console.log('------');
    });
  });
}

篇幅有限，完整的源码，可以看这里 vite-plugin-qrcode-terminal

3. 代码打包

我们的代码编写完成之后，我们要将它进行打包，这里我推荐大家使用tsup作为打包工具。tsup是一个基于 esbuild 的 cli 工具，能力非常强大且便捷，这里不做过多介绍。

有兴趣的朋友，可以去tsup 官方文档看看

// package.json

{
   "scripts": {
        "build": "rm -rf dist/ && tsup src/main.ts --dts --no-splitting"
    }
}

4. 测试验证

我们将插件进行打包构建，将将插件链接到全局

$ yarn link # 将插件链接到全局

我们新建一个 Vite 项目进行验证，引用我们的插件进行验证

$ yarn link "vite-plugin-qrcode-terminal"

// vite.confg.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { vitePluginQrcodeTerminal } from 'vite-plugin-qrcode-terminal';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), vitePluginQrcodeTerminal()],
  server: {
    host: true,
  }
})

配置好了之后，启动 dev

$ yarn vite

我们可以在控制台看到输入的二维码

发布依赖包

完成代码实现和测试工作后，接下来就是将我们的插件发布到npm.js上

1. 设置要进行发布的包的内容

// package.json
{
    "name": "vite-plugin-qrcode-terminal",
    "version": "0.0.1",
    "description": "create QR code in terminal",
    "types": "dist/main.d.ts", // ts类型声明
    "main": "dist/main.js", // 依赖包主入口
    "files": ["dist"] // 依赖包发布内容白名单
    ...
}

1. 注册并登陆npm.js，并把 npm 源改为 npm 官方源（taobao 源的话，无法发包到官网）

$ npm login # 登录
$ npm who am i # 查看是否登录成功，当前登录的是谁

1. 发布

$ npm publish

命令执行完毕，我们就可以在npm.js上看到我们发布的依赖包vite-plugin-qrcode-terminal

1. 额外的补充

• 关于版本号管理，推荐使用standard version插件
• 完成插件的编码之后，还有一个最重要的事情就是编写README.md文档，好的文档是插件饱受欢迎的第一步
• 觉得自己的插件编写得不错，可以通过 PR 的方式将你的插件添加到 Vite 官方维护的awesome-vite列表中

最后

Vite 的发展趋势不可阻挡，项目从 Webpack 升级 Vite 之后，大家用了都说香。开发环境冷启动、热更新速度对比 Webpack 提升 90%左右，打包构建提升 60%左右，大大地提升了开发幸福感

希望大家看完这篇文章，都能学会编写自己的 Vite 插件，积极拥抱 Vite

好好学习不会差，我是 970，祝大家越来越强，咱们下回再见