关于前端:为了不和测试扯皮-我抄了这个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'
        },
      ]
    }
  };
}

援用

首发于掘金，欢送关注