前言

之前项目在开发阶段为了提高效率，方便QA快速验证，我们直接从本地构建项目打包部署，跳过了线上验证阶段。同时也带来一个问题，项目是由其他人部署，而部署时间不定。当我们把改动提交后打包后，会将QA开的Issue标记为Fixed。由于部署的延迟，QA往往验证失败，开发人员又不得不去重新定位问题，因为除了没有部署成功，修复失败也是有可能的。这样会耗费很多时间来沟通。

为了解决这个痛点，花了一点时间写了这个简单易用的webpack插件。

GitInfoPlugin 用法

具体细节可以参考 GitInfoPlugin

GitInfoPlugin

一个非常简单的 webpack4 插件，用于快速查看本地build的git信息，用于快速定位当前build是基于哪次提交。

A very simple webpack4 plugin which is used to check git info of local build. it helps developers know which commit current build is based on.

使用(Usage)

npm install --save-dev git-info-plugin

然后在webpack.config中按照如下配置：

var GitInfoPlugin = require('git-info-plugin')

module.exports = {
  plugins: [
    new GitInfoPlugin()
  ]
}

构建完成后，打开网页，输入快捷键(默认ctrl + shift + Enter)，打开浏览器开发者工具，在console中可以看到当前build的最新一次git commit id.

open webpage and input default shortcut (ctrl + shift + enter), then open develper tools (chrome, firefox etc..). you could see newest commit id in console:

c698cec1c6c22641692c716535dfcb21492c41ed

branch

dev

detail

c698cec1 - lq007, 2 days ago : Fix some bugs

配置 (Config)

插件有默认配置，用户可不必自行填写。默认配置如下：

Default config is below:

module.exports = {
  plugins: [
    new GitInfoPlugin({
        hotKey: 'ctrl+shift+13',
        hotKeyDelimiter: '+',
        info: 'detail',
        show: 'console',
        command: '',
        filename: 'gitInfo'
    }
  ]
}

`hotKeyDelimiter: '+'`

快捷键分隔符，默认为’+’，用户可自行设置为‘～’，‘¥’ 等等。

user could add custom hotkey delimiter like ‘#’,’%’ etc..

`hotKey: 'ctrl+shift+13'`

通过设置hotKey用户可自定义快捷键以免与项目已有快捷键冲突。目前支持的快捷方式是Ctrl或Shift或Alt任意组合再加键盘的keyCode，
比如回车键(Enter)的keyCode是13.

Currently, legal hot keys are ‘Ctrl’ or ‘Shift’ or ‘Alt’ associated with keyCode. for example: ctrl+shift+13 (13 is Enter keyCode) or ctrl+13

:warning: 注意: 1. hotKey中的分隔符应和hotKeyDelimiter中的配置保持一致。
2. hotKey之间不允许出现空格

:warning: Note: 1. the delimiter in config hotKey should be consistent with that in config hotKeyDelimiter.
2. there should be no space between hotkeys.

`info: 'id' || 'branch' || 'detail'`

通过info配置，用户可选择项目中展示的info信息。目前支持id, branch以及detail三种形式。

Currently, it supports 3 types of info: id, branch and detail.

`show: 'console' || 'file' || 'both'`

默认为console, 即git信息只有用快捷键通过开发者工具中的console显示。

console is default value. it means we could only get git info from console through hotkey.

如果设置为file，git信息将会导出到文件gitInfo.md并且无法通过使用快捷键在console中显示。

file means git info will only show in exported file.

如果设置为both，即console模式和file模式同时开启。

both means ‘console’ mode and ‘file’ mode are both available.

`command: ''`

默认不赋值，仅仅使用插件提供的info option当中的选项。用户可以通过command配置自定义git command. 自定义后，info配置项将失效。

user could set custom git command through the option. Note that info options will be inactive if user set custom command.

例子(example) : { command: ‘git status’ }

:warning:警告: 请不要使用操作性command，比如’pull’,’add’,’delete’,’revert’,’merge’等，否则编译过程将会抛错。

:warning:Warning: Please don’t use operational git commands which may change current project like ‘pull’, ‘add’, ‘delete’, ‘revert’, ‘merge’ etc.. or webpack will throw compile error.

`filename: 'gitInfo'`

用户可自定义导出git信息的文件名，默认值为’gitInfo’，导出文件即为’gitInfo.md’。

user could set custom file name for exported file. by default the name is ‘gitInfo.md’.

版本支持 (Webpack version)

该插件支持webpack4及以上。

it supports webpack4 or above.

依赖 (Dependency)

在成功运行GitInfoPlugin之前，在webpack.config中需要有关于HtmlWebpackPlugin配置。

The plugin runs based on webpack HtmlWebpackPlugin.

const GitInfoPlugin = require('git-info-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
            template: './src/index.html'
    }),
    new GitInfoPlugin()
  ]
}

浏览器兼容性 (browser compatibility)

Chrome >= 45

FireFox >= 34

Safari >= 9

Edge

Not support IE <= 10

这是个方便开发人员的插件，所以并不需要兼容很多浏览器对吧？我觉得有chrome就足够了 :sunglasses:

It’s just a plugin for developer, so we don’t have to support old browsers, right ? actually Chrome is enough :yum:

提高空间

当前这个插件还有很大的扩展空间。

罗列一个TODO List:

插件容错：如果用户输入了错误的配置，需要停止编译并提示失败。 – 持续提升中
~~用户自定义git command，但是如果输入操作性命令(如merge, delete 等)，则抛出错误停止编译。~~ – 已完成
提供更多的更灵活的配置，赋予用户更多的能力 – 持续提升中
移除对HtmlWebpackPlugin的依赖（当前插件需要用到html-webpack-plugin的hook，将一段script插入到生成的template html当中，这样其实不太好）

自制土枪-Webpack4 GitInfoPlugin