Добавление имени git ветки в webpack-бандл

2020-6-3

Зачем?

Недавно столкнулся с тем что в тестовую сборку необходимо было добавить название текущей git-ветки.
Ветки у нас именуются по тикетам, поэтому при тестировании сборки довольно удобно смотреть версию по ветке.
Пример названия ветки: bugfix/widget-3034

Сделать это оказалось не сложно, и гуглится всё довольно легко, но так как в блог надо писать хоть что-нибудь, решил поделиться.
Существует 2 способа:

Очень простой способ

Нам понадобится скачать пакет git-revision-webpack-plugin

Для этого:

npm install --save-dev git-revision-webpack-plugin

И настраиваем плагин

const webpack = require("webpack");
const GitRevisionPlugin = require("git-revision-webpack-plugin");
const gitRevisionPlugin = new GitRevisionPlugin();

const branchName = JSON.stringify(gitRevisionPlugin.branch());

module.exports = {
    plugins: [
        gitRevisionPlugin,
        new webpack.DefinePlugin({
            BRANCHNAME: branchName
        })
    ]
};

Простой способ

Этот способ практически не отличается от первого.
Единственное отличие в том, что вместо использования плагина, мы получим название ветки самостоятельно.

const webpack = require("webpack");
const childProcess = require("child_process");

const branchName = childProcess
    .execSync("git rev-parse --abbrev-ref HEAD")
    .toString()
    .trim();

module.exports = {
    plugins: [
        new webpack.DefinePlugin({
            BRANCHNAME: `"${branchName}"`
        })
    ]
};

На этом всё.

Алексей Баранов