面试必备之源代码已出,妙语犹在—我如何对打包后的HTML加工润色

面试官: 作为一个刚刚毕业的初级前端对开发工具的使用肯定比较熟悉吧,写个vite插件对html进行修改如何实现呢?

我: 这种简单的功能,一般使用三方包实现,不自己写

面试官: ...需要自己写呢?

我:

场景

根据环境不同添加不同的代码,比如

生产添加三方统计sdk

测试环境添加调试工具vconsole

加入预数据

vite插件系统 与 Rollup 的关系

官方文档:文档

Vite是基于Rollup开发的，因此它们的许多设计和实现都有很多相似之处。Vite的构建过程中还使用了一些Rollup的核心库和插件。

同时，Vite也对Rollup进行了一些扩展和优化，使开发者可以更方便地构建现代web应用。例如，在处理 JavaScript 模块上，Vite使用了原生的ESM模块，并将模块的解析、处理和组成委托给了浏览器。这大大加速了开发过程，并使热重载更加灵活和快速。

Vite插件系统也是基于Rollup插件系统构建的，并且Vite与Rollup API和生命周期有很大的相似之处。这使得开发者可以很容易地从Rollup迁移到Vite，并以其熟悉的方式编写插件。

尽管Vite和Rollup之间存在许多相似之处，但它们的主要功能和设计目标是不同的。Rollup主要用于打包JavaScript应用程序和库，而Vite主要用于开发现代web应用.

简单来说就是 vite 参考了 Rollup 的插件系统并且对齐进行了扩展.

vite插件结构

先上代码

import { Plugin } from 'vite'

export default function myPlugin(): Plugin {
    return {
        name: 'my-plugin', // 必须的,你的插件名称，如果内部报错会在 warning 和 error 中显示
        ... // 其他钩子
    }
}

是不是很简单和vue的配置试一样导出个对象即可

常用的钩子

启动时触发一次,获取运行的命令和获取或修改配置.高级操作必备良药

config

开发环境服务启动时的钩子,可获取到 Server 对象,可为其添加中间件,参考 express

configureServer

每个文件都会触发的钩子,会把 文件路径 和 文件内容 字串传入,文件内容受上一个插件的影响,如果要获取到源文件需要将插件顺序放到第一位

resolveId
load
transform

transformIndexHtml 转换 index.html 的专用钩子,每次热更新后都会触发一次

实现

要改变html则用 transformIndexHtml 即可

transformIndexHtml 接收一个参数,完整的html内容 输出也是,所以只要将修改后的字串返回即可

import { Plugin } from 'vite'

export default function ReplaceHtmlPlugin(): Plugin {
    // 要插入的内容
    const htmlContent  = [
        '<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>',
        '<div style="position: fixed;left: 0;top: 0;z-index: 1000;background-color: rgba(0,0,0,0.5);pointer-events: none;user-select: none;color: #fff;">环境标识漂浮物</div>'
    ].join('\n')

    return {
        name: 'replace-html-plugin', 
        transformIndexHtml(html) {
          // 将结束标题替换
          return html.replace(
            '</body>',
            `${htmlContent}
            </body>`
          )
        }
    }
}