在vue项目中展现package以及git提交信息

vue项目如何这样在控制台显示版本信息呢？

chrome控制台打印信息：

版本号
版本信息项目，运行在 dev 环境，编译时间：2020-06-28T11:40:52+08:00
发布版本：1.0.2；最后提交：efewwererwfsdcsdcsdcccxvcvxe2323d，超前发布版本9个提交
运行在：Chrome 83.0.4103.106 on OS X 10.15.4 64-bit

控制台打印出了项目名称、项目运行环境、版本号以及 git 提交信息。当我们在调试时，如果出现bug也会方便我们找到出现问题的版本。那怎样去实现这个功能，无非就是去取我们需要的信息，然后在main.tx中console.log出来。下面开始干正事。

首先，介绍一下webpack的DefinePlugin插件，DefinePlugin 允许创建一个在编译时可以配置的全局常量。这可能会对开发模式和发布模式的构建允许不同的行为非常有用。如果在开发构建中，而不在发布构建中执行日志记录，则可以使用全局常量来决定是否记录日志。这就是 DefinePlugin 的用处，设置它，就可以忘记开发和发布构建的规则。

每个传进 DefinePlugin 的键值都是一个标志符或者多个用 . 连接起来的标志符。

• 如果这个值是一个字符串，它会被当作一个代码片段来使用。
• 如果这个值不是字符串，它会被转化为字符串(包括函数)。
• 如果这个值是一个对象，它所有的 key 会被同样的方式定义。
• 如果在一个 key 前面加了 typeof,它会被定义为 typeof 调用。

这里，在webpack.conf.js里定义DefinePlugin 的键值：

onst path = require('path');
const { DefinePlugin } = require('webpack');
const repoInfo = require('./git-repo-info')();
let rootPath = __dirname;
const packageJson = require(path.join(rootPath, 'package.json'));

module.exports = {
  configureWebpack: {
    plugins: [
      new DefinePlugin({
        __PROJECT_NAME__: JSON.stringify(packageJson.name),
        __PROJECT_DISPLAY_NAME__: JSON.stringify(packageJson.displayName),
        __PROJECT_COMMIT_SHA__: JSON.stringify(repoInfo.sha),
        __PROJECT_VERSION__: JSON.stringify(repoInfo.lastTag),
        __PROJECT_ENVIRONMENT__: JSON.stringify(process.env.NODE_ENV === 'production' ? 'prod' : 'dev'),
        __PROJECT_COMPILE_TIME__: JSON.stringify(Date.now()),
      }),
    ],
  },
};

细心的小伙伴会发现，这些值都用上了JSON.stringify了，
因为这个插件直接执行文本替换，给定的值必须包含字符串本身内的实际引号。
git-repo-info文件中获取git提交信息：

'use strict';

const cp = require('child_process');

module.exports = function getRepoInfo(cwd = process.cwd()) {
  try {
    const execConfig = { encoding: 'utf8', cwd };
    const detailString = cp.execSync(`git show --format='%H%ncn%n%cI%n%an%n%aI%n%s' -q --encoding=UTF-8`, execConfig);
    const [sha, committer, committerDate, author, authorDate, commitMessage] = detailString.split('\n');
    return {
      sha,
      committer,
      committerDate,
      author,
      authorDate,
      commitMessage,
    };
  } catch (e) {
    return null;
  }
};

child_process是node的子进程，child_process.execSync(command[, options])，衍生 shell 并且在 shell 中运行命令，当完成时则将 stdout 和 stderr 传给回调函数，同步的，共两个参数：

• command 要运行的命令。
• options
  cwd 子进程的当前工作目录。
  encoding 用于所有 stdio 输入和输出的字符编码。 默认值: ‘buffer’。

git show format选项：

• %H 提交对象（commit）的完整哈希字串
• %h 提交对象的简短哈希字串
• %cn 提交者(committer)的名字
• %n 换行
• %cI提交日期, strict ISO 8601 格式
• %an 作名字
• %s 提交说明
  这样我们就获取到了所需要的信息了

新建一个Project.ts，引入这些变量导出，然后在main.ts中引用就可以了。

declare var __PROJECT_NAME__: string;
declare var __PROJECT_DISPLAY_NAME__: string;
declare var __PROJECT_ENVIRONMENT__: 'dev' | 'prod';
declare var __PROJECT_VERSION__: string;
declare var __PROJECT_COMMITS_SINCE_RELEASE__: number;
declare var __PROJECT_COMPILE_TIME__: number;
declare var __PROJECT_COMMIT_SHA__: string;

export const Project = Object.freeze({
  name: __PROJECT_NAME__,
  displayName: __PROJECT_DISPLAY_NAME__,
  environment: __PROJECT_ENVIRONMENT__,
  version: __PROJECT_VERSION__,
  compileTime: __PROJECT_COMPILE_TIME__,
  commitSha: __PROJECT_COMMIT_SHA__,
});

这里Project.ts 中的 declare var只是起到ts类型提示的作用，没有其他实质意义。