npm 包 giticon 使用教程

在前端开发中，常常需要在页面中显示版本信息，此时使用 Git commit 中的 SHA 值是一个不错的选择。不过，SHA 值太长了，给用户带来了一定的不便。

为了让显示版本信息更加直观，可以使用 giticon 这个 npm 包，将 Git commit 的 SHA 值转换成能够显示在页面中的图标。

giticon 的安装和使用

giticon 的安装非常简单，只需要在命令行中输入以下命令即可：

npm install giticon --save

安装完成后，就可以在代码中引入 giticon：

const giticon = require('giticon');

使用 giticon 将 SHA 值转换成图标也非常简单：

const icon = giticon('c6ebed3'); // 将 SHA 值转换成图标
document.body.appendChild(icon); // 将图标添加到页面上

运行上述代码后，页面上将会显示一个类似于 GitHub 上的 commit 图标：

giticon 的深度应用

除了将 SHA 值转换成图标外，giticon 还支持其他一些深度应用的功能，如当前分支的图标和当前用户的头像。

获取当前分支的图标

获取当前分支的图标，需要先通过 Git 获取当前分支的名称，然后将其传递给 giticon，最后将返回的图标添加到页面中。

const { execSync } = require('child_process');

const currentBranch = execSync('git symbolic-ref --short HEAD').toString().trim();
const icon = giticon.branch(currentBranch);
document.body.appendChild(icon);

通过上述代码获取的图标，可以更加直观地展示当前分支信息。

获取当前用户的头像

获取当前用户的头像，需要先获取用户的邮箱，然后将其传递给 giticon，最后将返回的头像添加到页面中。

const userEmail = execSync('git config --get user.email').toString().trim();
const avatar = giticon.avatar(userEmail);
document.body.appendChild(avatar);

通过上述代码获取的头像，可以更加直观地展示当前用户信息。

总结

giticon 这个 npm 包可以将 Git commit 的 SHA 值转换成能够显示在页面中的图标，通过深度应用，还可以获取当前分支的图标和当前用户的头像。

通过学习 giticon 的使用，我们对 npm 包的使用有了一定的实践经验，并可以更加直观地展示版本信息和用户信息。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600672563660cf7123b3634e