vite打包时添加打包标记的打包插件

GandoraMask

已于 2024-06-17 15:09:10 修改

阅读量240

点赞数 1

文章标签： vue javascript

于 2024-06-17 11:30:48 首次发布

本文链接：https://blog.csdn.net/qq_36208612/article/details/139737901

版权

一、插件代码

// buildSignPlugin.js
import { Plugin, loadEnv } from 'vite'
import fs from 'fs'
import path from 'path'
interface Config {
  output?: string
  filename?: string
  fileType?: 'text' | 'ts' | 'js' | 'json' | string
  [keyname: string]: any
}
const buildSignPlugin: (options: Config) => Plugin = function (options?: Config) {
  const { dir = './dist', filtname = 'build-sign', fileType = 'text' } = options || {}
  return {
    name: 'vite-build-sign',
    // Vite 独有钩子
    config(config) {
      // console.log('config')
    },
    // Vite 独有钩子
    configResolved(resolvedCofnig) {
      // console.log('configResolved')
    },
    // 通用钩子
    options(opts) {
      console.log('options')
      return opts
    },
    // Vite 独有钩子
    configureServer(server) {
      // console.log('configureServer')
      // setTimeout(() => {
      //   // 手动退出进程
      //   process.kill(process.pid, 'SIGTERM')
      // }, 3000)
    },
    // 通用钩子
    buildStart() {
      // console.log('buildStart')
      // 获取当前时间
    },
    // 通用钩子
    buildEnd() {
      // console.log('buildEnd')
    },
    // 通用钩子
    closeBundle() {
      const root = process.cwd()
      const env = process.env
      const packageJsonPath = root + '/package.json'

      const buildTime = new Date().toISOString()
      // 读取并解析 package.json 文件
      let npm_package_version = (env && env.npm_package_version) || ''

      if (!npm_package_version) {
        try {
          const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'))
          if (packageJson) {
            npm_package_version = packageJson.version
          }
        } finally {
        }
      }
      // 构建文件内容，导出当前时间
      const fileContent = `build time：${buildTime}\n version: ${npm_package_version}\n ${JSON.stringify(env)}`
      // 写入文件
      const outputDir = path.resolve(dir) // 假设文件写入到输出目录
      const filePath = path.join(outputDir, `${filtname}.${fileType}`)
      fs.writeFileSync(filePath, fileContent)
      // console.log('closeBundle')
    },
  }
}

export default buildSignPlugin

二、标题使用插件

// vite.config.js
import buildSignPlugin from './buildSignPlugin'; // 引入你的插件

export default {
  // ... 其他配置
  plugins: [
    // ... 其他插件
    buildSignPlugin(), // 使用你的插件
  ],
};

三、封装成npm包

创建npm项目
npm init -y
2.编辑package.json

{
  "name": "vite-build-sign-plugin",
  "version": "1.0.0",
  "description": "A Vite plugin to create a build-sign.js file with the current build time.",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "vite",
    "plugin",
    "build",
    "sign"
  ],
  "author": "Your Name",
  "license": "ISC"
}