关于前端:为了不和测试扯皮-我抄了这个vite插件

前言

这算是我的第二个vite插件了GitHub中转，第一个是腾讯云OSS上传，思路以及部份代码借鉴了浏览器API调用工程师的我的项目，在此基础上欠缺和减少配置项。

如果文章对你有帮忙的话，记得一键三连哟。有问题和纳闷的话也能够在评论区留言。我会第一工夫回复大家，如果感觉我的文章哪里有知识点谬误的话，也恳请可能告知，把错的货色了解成对的，无论在什么行业，都是致命的。

背景

我的项目环境比拟多，常常漏发错发版本，导致测试和开发间的扯皮比拟多。于是，这个插件便截天地气运而生。

性能个性

目标: 在控制台显示以后运行代码的构建人、构建工夫、分支、最新的COMMIT信息等, 不便确认是否漏发错发版本。
留神： 只在GitLab流水线有用

成果预览

能够在控制台查看代码的部署信息

装置

pnpm i -D vite-plugin-gitlab-flow

或者

yarn add -D vite-plugin-gitlab-flow

或者

npm i -D vite-plugin-gitlab-flow

根本应用

在vite.config.js/ts中配置

import vitePluginGitLabFlow from "vite-plugin-gitlab-flow";plugins: [    vitePluginGitLabFlow({        projectName: '榕树工具',        debug: true,        extra: [            {                keys: 'VITE_APP_TITLE',                label: '我的项目title'            }        ],        styles:{          color: 'red'        }    }),]

配置项

实现原理

import type { Plugin, HtmlTagDescriptor } from 'vite';import dayjs from 'dayjs';import fs from 'fs';import {Properties,PropertiesHyphen} from 'csstype';interface Style extends Properties, PropertiesHyphen {}export const defaultStyle:Style = {    color: 'white',    background: 'green',    'font-size': '16px',    border: '1px solid #fff',    'text-shadow': '1px 1px black',    padding: '2px 5px',}interface GitLabFlowOptions {  projectName?: string,  debug?:boolean,  extra?:{    label:string    keys:string,  }[],  styles?:Style}export default function gitLabFlow(options: GitLabFlowOptions): Plugin {  let {debug=false,extra=[],styles=defaultStyle}=options  let styleOption=''  for (const styleOptionKey in styles) {    styleOption+=`${styleOptionKey}:${styles[styleOptionKey]};`  }  // 获取环境变量  const env = process.env;  // 获取我的项目package.json  const pkg:any = JSON.parse(fs.readFileSync(process.cwd() + '/package.json', 'utf-8'));    // 获取插件package.json  let packageInfo: any = JSON.parse(fs.readFileSync(process.cwd() + '/node_modules/vite-plugin-gitlab-flow/package.json', 'utf-8'))    const appInfo = {    projectName: options.projectName || pkg.name,    name:pkg.name,    version:pkg.version,    lastBuildTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),  };  //打印默认我的项目信息  let extStr=`    console.log("%c插件名称: ${packageInfo.name} 以后版本: V${packageInfo.version}","${styles}" );    console.log("%c插件作者: ${packageInfo.author} 仓库地址: ${packageInfo.homepage}","${styles}");    console.log("%c项目名称:${appInfo.projectName}", "${styles}");    console.log("%c打包工夫: ${appInfo.lastBuildTime}","${styles}");    console.log("%c流水线执行人: ${env.GITLAB_USER_NAME || '-'}", "${styles}");    console.log("%c标签: ${env.CI_COMMIT_REF_NAME || '-'}", "${styles}");    console.log("%cCOMMIT信息: ${env.CI_COMMIT_TITLE || '-'} ${env.CI_COMMIT_SHA || '-'}", "${styles}");    `    //能够自定义须要显示的字段，  // 新增自定义字段  extra.forEach(({label,keys})=>{    extStr+=`console.log("%c${label}: ${env?.[keys] || '-'}","${styles}");`  })    //开始debug模式后，会打印变量  // debugger模式  if (debug){    extStr+=`console.log('appInfo', ${JSON.stringify(appInfo)});`    extStr+=`console.log('packageInfo', ${JSON.stringify(packageInfo)});`    extStr+=`console.log('env', ${JSON.stringify(env)});`  }  return {    name: 'vite-plugin-gitlab-flow',    apply: 'build',    transformIndexHtml(html): HtmlTagDescriptor[] {      return [        {          tag: 'script',          attrs: { defer: true },          children: extStr,          injectTo: 'body'        },      ]    }  };}

援用

首发于掘金，欢送关注