vite 插件

vite-plugin-html

https://github.com/vbenjs/vite-plugin-html

vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { createHtmlPlugin } from 'vite-plugin-html'

export default defineConfig({
  plugins: [
    vue(),
    createHtmlPlugin({
      minify: true,
      inject: {
        data: {
          title: 'index',
          injectScript: `<script src="./inject.js"></script>`,
        },
        tags: [
          {
            tag: 'div',
            attrs: { id: 'ddd' },
            injectTo: 'body-prepend',
          },
        ],
      },
    }),
  ],
})

.env 文件：

NODE_ENV=dev
ENV=env

index.html 可以直接使用 vite-plugin-html 注入的 data，默认还可以直接使用 .env 里提供的内容。

html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 直接使用 vite-plugin-html 注入的 data -->
    <title>test-<%- title %></title> // [!code hl]
  </head>

  <body>
    <div><%- ENV %></div> // [!code hl]
    <div><%- NODE_ENV %></div> // [!code hl]
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
    <%- injectScript %>
  </body>
</html>

还可以使用 process.env.NODE_ENV，值为 development 或 production。

约定

对于 Vite 专属的插件，

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

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

vite-plugin-vue- 前缀作为 Vue 插件
vite-plugin-react- 前缀作为 React 插件
vite-plugin-svelte- 前缀作为 Svelte

插件配置

用户会将插件添加到项目的 devDependencies 中并使用数组形式的 plugins 选项配置它们。

// vite.config.js
import vitePlugin from 'vite-plugin-feature'
import rollupPlugin from 'rollup-plugin-feature'

export default defineConfig({
  plugins: [vitePlugin(), rollupPlugin()],
})

简单示例（转换自定义文件类型）

插件应该默认导出一个函数，函数会返回一个配置对象。

const fileRegex = /\.(my-file-ext)$/

export default function myPlugin() {
  return {
    name: 'transform-file',

    transform(src, id) {
      if (fileRegex.test(id)) {
        return {
          code: compileFileToJS(src),
          map: null // 如果可行将提供 source map
        }
      }
    },
  }
}

vite 插件 ​

vite-plugin-html ​

约定 ​

插件配置 ​

简单示例（转换自定义文件类型） ​

vite 插件

vite-plugin-html

约定

插件配置

简单示例（转换自定义文件类型）