我报名参加金石计划一期挑战——瓜分10万奖池，这是我的第2篇文章, 点击查看详情。

前言

想在控制台输出一下前端代码的一些构建信息，比如打包时间、打包的人, 代码分支、commit是那个，方便在控制台追溯。

本文是我做这件事情的心路历程, 欢迎交流，欢迎指出问题！

背景

1、场景一

前端多人协同开发的情况下，比方测试站，你发的代码，貌似被人覆盖了，测试说不对啊，你很烦，这时你问: 谁发过吗，没人说话， 倘若控制台可以追溯谁在几点发布了什么 commit信息等等...那就不用迷茫了。

2、打印出来可以帮助排查问题

思路

首先理一下我们要输出的信息，然后在想如何获取他们, 最后输出。

输出的信息列表

1、打包时间 buildTime

我的思路是可以在打包程序启动的时候记录一个时间然后存到全局。

2、构建时nodejs的版本

这个我们用的是阿里云流水线，我在想应该可以在流水线的运行时，全局变量获取到。

3、分支信息

同上

4、commit信息

同上

流水线执行人

同上

开干

现在就分两个了，一个是记录打包时间，一个是阿里云流水线的运行时全局变量

记录打包时间

1、因为使用vite打包的，翻了vite文档发现了define这个配置

文档地址: vitejs.bootcss.com/config/#def…

没错，这就是我要的，它可以把变量定义全局，那么我定义一个当前时间, 那么就是打包时间。

2、在vite.config.ts增加如下

定义时间

import dayjs from 'dayjs';
const __APP_INFO__ = {
  buildTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
};

增加到define的配置

// https://vitejs.dev/config/
export default ({ command, mode }: ConfigEnv): UserConfig => {
return {
    ...
    define: {
      __APP_INFO__: JSON.stringify(__APP_INFO__),
    }
}

3、在app.vue中打印一下

script lang="ts" setup>
// 1. 将css样式内容放入数
const styles = [
    'color: white',
    'background: green',
    'font-size: 19px',
    'border: 1px solid #fff',
    'text-shadow: 2px 2px black',
    'padding: 5px',
].join(';');
console.log(
    `%c打包时间: ${__APP_INFO__.lastBuildTime}`,
    styles,
);
</script>

4、打包一次看一下效果

好，不错！。

获取流水线运行时环境变量

1、打印一下 process.env 查看有哪儿些信息

信息量有点大呀

或者查看阿里云文档也可以 help.aliyun.com/document_de…

2、找寻我们需要的子段

CI_RUNTIME_VERSION // 构建时nodejs的版本
EXECUTOR_NAME // 流水线执行人
CI_COMMIT_REF_NAME // 分支名
CI_COMMIT_TITLE // commit信息中文
CI_COMMIT_ID // commit哈希

3、vite.config.ts配置

获取环境变量

const env = process.env;

放在全局

// https://vitejs.dev/config/
export default ({ command, mode }: ConfigEnv): UserConfig => {
return {
    ...
    define: {
      __APP_INFO__: JSON.stringify(__APP_INFO__), // 之前的打包时间
      __GLOBAL_ENV__: env // 环境变量
    },
}

4、app.vue打印

<script lang="ts" setup>
// 1. 将css样式内容放入数
const styles = [
    'color: white',
    'background: green',
    'font-size: 19px',
    'border: 1px solid #fff',
    'text-shadow: 2px 2px black',
    'padding: 5px',
].join(';');

console.log(
    `%c打包时间: ${__APP_INFO__.lastBuildTime}`,
    styles,
);

console.log(
    `%c构建Node.js版本: ${__GLOBAL_ENV__.CI_RUNTIME_VERSION || '-'}`,
    styles,
);

console.log(
    `%c流水线执行人: ${__GLOBAL_ENV__.EXECUTOR_NAME || '-'}`,
    styles,
);

console.log(
    `%c分支: ${__GLOBAL_ENV__.CI_COMMIT_REF_NAME || '-'}`,
    styles,
);

console.log(
    `%cCOMMIT信息: ${__GLOBAL_ENV__.CI_COMMIT_TITLE || '-'} ${__GLOBAL_ENV_.CI_COMMIT_ID || '-'}`,
    styles,
);
</script>

5、打包，然后控制台查看一下

完整代码

vite.config.ts

import dayjs from 'dayjs';
const __APP_INFO__ = {
  buildTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
};
const env = process.env;
// https://vitejs.dev/config/
export default ({ command, mode }: ConfigEnv): UserConfig => {
return {
    ...
    define: {
      __APP_INFO__: JSON.stringify(__APP_INFO__),
      __GLOBAL_ENV__: env // 环境变量
    }
}

app.vue

// 在开发环境不打印
if (import.meta.env.VITE_APP_ENV !== 'dev') {
    // 1. 将css样式内容放入数
    const styles = [
        'color: white',
        'background: green',
        'font-size: 19px',
        'border: 1px solid #fff',
        'text-shadow: 2px 2px black',
        'padding: 5px',
    ].join(';');

    console.log(
        `%c打包时间: ${__APP_INFO__.buildTime}`,
        styles,
    );

    console.log(`%c构建Node.js版本: ${__GLOBAL_ENV__.CI_RUNTIME_VERSION || '-'}`, styles);

    console.log(`%c流水线执行人: ${__GLOBAL_ENV__.EXECUTOR_NAME || '-'}`, styles);

    console.log(`%c分支: ${__GLOBAL_ENV__.CI_COMMIT_REF_NAME || '-'}`, styles);

    console.log(
        `%cCOMMIT信息: ${__GLOBAL_ENV__.CI_COMMIT_TITLE || '-'} ${
            __GLOBAL_ENV_.CI_COMMIT_ID || '-'
        }`,
        styles,
    );
}

最后

欢迎交流，评论区开喷

前端控制台输出构建/打包信息实践

前言

背景