痛点

实际开发过程中，经常会被问到：项目在xx环境部署了没？什么时候部署的？用的xx组件是哪个版本...

组件版本我们可以看下程序，就知道了。但什么时候部署的，那得去找运维或现场实施问，很麻烦。

解决方案

我们不妨把常用到的信息在控制台输出，这样不仅简便，而且准确。

输出日志可以包含：

• 项目名称
• 环境
• 构建时间
• 指定包版本

build-log.js

新建生成日志文件build-log.js

function genLog({ title, content }) {
  const args = [
    `%c ${title} %c ${content} `,
    `padding: 1px; border-radius: 3px 0 0 3px; color: #fff; background: #606060;`,
    `padding: 1px; border-radius: 0 3px 3px 0; color: #fff; background: #42c02e;`
  ]
  console.info(...args)
}
export function buildLogInfo() {
  try {
    genLog({ title: 'Env', content: process.env.NODE_ENV })
    genLog({ title: 'ProjectName Build Time', content: BUILDTIME }) // 全局变量
    genLog({ title: 'Package Version', content: VERSION })
  } catch (error) {
    console.error(error)
  }
}

DefinePlugin

这里BUILDTIME和VERSION是在构建打包时定义的，由于项目是基于VUE CLI3脚手架，只需要在vue.config.js中配置如下：

const { dependencies } = require('./package.json')
config.plugin('define').tap(args => {
  args[0]['BUILDTIME'] = JSON.stringify(new Date().toLocaleString())
  args[0]['VERSION'] = JSON.stringify(dependencies['package-xxx'])
  return args
})

这里其实还是用的webpack.DefinePlugin

new webpack.DefinePlugin({
  BUILDTIME: JSON.stringify(new Date().toLocaleString()),
  VERSION: JSON.stringify('xxx')
})

format specifiers

在上面构建日志的方法genLog，%c是个格式说明符。

说下我们用到的%c：

const style = 'background-color:darkblue; color:white; font-style:italic;'
console.log("%cHooray", style);

它的意思是会将第二个样式参数应用于第一个输出参数上。

入口文件

在入口文件main.js中引入生成日志函数，执行即可。

import { buildLogInfo } from './utils/build-log.js'
buildLogInfo()

效果

打开浏览器控制台，就可以看到：

如果你需要关注更多的项目信息，按例新增即可。