插件背景及项目概述
在现代前端开发中，我们常常需要获取当前线上环境的代码构建信息，如项目打包人、打包时间、Git版本信息等。在持续集成/持续交付（CI/CD）流水线中，这类信息尤其重要。来看一下几个真实的开发场景：
- 自动构建与部署的困扰：公司的项目基于GitLab和Coding流水线进行自动构建和部署。每当开发人员提交代码后，测试同学常常询问“代码更新了吗？为什么没有生效？”此时，我不得不登录到Coding查看仓库，确认是否是最新代码。
- 版本号的查找麻烦：每次发布版本时，都需要手动填写Git版本号，而这往往意味着我得登录Coding查找相关信息，过程繁琐且容易出错。
- 生产问题排查的低效：当生产代码出现问题时，前端A与运维B之间需要反复确认线上镜像和对应代码信息，找到匹配的版本后才能开始排查问题。这个过程非常低效且浪费时间。
如果我们能开发一个插件，自动记录每次打包的代码信息，并且能在生产和开发环境中追踪这些信息，是否能完美解决上述问题呢？dist-info插件应运而生！
dist-info是一款能够将Git信息或自定义内容注入HTML的插件，兼容Webpack和Vite项目。使用该插件后，只需在浏览器控制台输入info，即可轻松查看代码的相关信息或自定义内容。
本文将使用字节最新推出的AI编程工具Trae，通过零代码方式快速搭建插件框架、编写核心代码，完成插件的开发工作。开发完成后，我们将借助Trae将插件上传至GitHub，并在npm上发布，确保插件的高效分发与便捷使用。
为什么选择Trae
Trae是字节最新推出的一款免费AI编程IDE，对标国外的 Cursor 、Copilot这类AI编程工具。
Trae（/treɪ/）与 AI 深度集成，提供智能问答、代码自动补全以及基于 Agent 的 AI 自动编程能力。使用 Trae 开发项目时，我们可以与 AI 灵活协作，提升开发效率。
由于是国产的，在语言和易用性方面更加符合国产编程宝宝的体质。如果你是一个Vscode忠实用户，可以无缝迁移至Trae。
使用Trae实现dist-info插件
开发前准备
Trae支持mac和windows版本，我们根据官方的 下载地址安装软件。安装Trae时，我们可以选择主题颜色，然后同步我们的Vsocde配置。
Trae的编译器界面与Vscode基本是一致的，同步Vsocde配置后，Trae的左侧栏也会自动展示我们Vscode安装的插件，这可以让我们无缝从Vsocde上手Trae。
注：如果下载软件后无法使用，登录Vpn科学上网后再使用。
插件实现原理
要实现插件的效果，我们的大致思路如下：
- 打包或编译时，通过node获取当前的git信息
- 打包结束后，将获取的git信息注入打包后的代码中
- 在浏览器控制台，通过特殊方式展示打包信息
├── 核心逻辑层
│ ├── Git信息采集（借助node能力）
│ ├── 信息处理与注入（通过webapck或vite钩子实现）
├── 构建工具适配层（判断构建工具类型）
│ ├── Webpack插件实现
│ └── Vite插件实现
└── 输出呈现层
├── 控制台样式优化（console美化）
└── 信息展示机制（window劫持）
使用Trae-Builder快速搭建项目
在开始项目之前，我们先创建dist-info文件夹，然后用Trae打开项目。
要开发一个webpack或vite插件，我们的项目应该包含下面的结构：
├── index.js // 插件核心逻辑
├── README.md // 插件使用说明
├── rollup.config.js // 打包配置
├── package.json // 依赖管理
Trae提供了一个Trae-Builder模式，可以轻松完成从零到一的项目构建。在 Builder 模式下，我们对代码文件的任何更改都会自动保存。
我们可以借助Trae-Builder直接在空项目中创建上述项目结构，我们给出必要提示：
我要开发一个名为dist-info的前端插件，文件的核心逻辑位于根目录的index.js。插件使用rollup进行打包，打包输出的目录为lib/index.js。请帮我初始化git信息、安装配置好项目用到的rollup依赖（配置写在rollup.config.js文件中）。
Trae-Builder会根据提示，自动帮我创建项目，生成对应的项目文件。
在项目生成过程中，我们可以根据需求执行对应的命令，参考下图，执行git commi
Trae-Builder运行完毕后，一个完成的项目就被快速创建出来了。现在，我们只需要审查项目，保留删减代码即可。
如下图，Trae-Builder生成的代码基本完全满足我的需求，直接点击【接受】即可。
至此，我们借助Trae-Builder就快速实现了项目的搭建。
使用Trae实现核心代码
Trae-Chat简介
Trae提供了一个 Trae-Chat模式，它可以对我们的代码或编程问题进行提问。通过 Trae-Chat，可以极大提升开发效率。
代码基本架构
根据插件的需求，我们的index.js基本架构应该如下：
const isVite =
process.argv.some((arg) => arg.includes("vite")) ||
process.env.VITE_ !== undefined;
function DistInfoPlugin() {
try {
//获取js内容(内部包含git信息)
const jsContent = getJsContent();
// 根据脚手架类型,执行不同js注入逻辑
return isVite ? vitePlugin(jsContent) : webpackPlugin(jsContent);
} catch (err) {
console.log("DistInfoPlugin", err);
}
}
// 确保插件作为默认导出
module.exports.default = DistInfoPlugin;
module.exports = DistInfoPlugin;
当项目打包时，插件会判断当前脚手架类型，执行webapck或vite对应的钩子函数。打包过程中，node会获取当前的git信息，并生成js内容（getJsContent）。在打包结束时，对应的webapck或vite钩子激活，生成的js脚本被注入在打包文件的index.html中。
有些同学可能不太懂isVite的逻辑，借助Trae-Chat回答一下：
git信息的获取
getJsContent的第一步应该是通过node获取git信息，我们通过Trae-Builder让Trae帮我们完善代码。
Trae-Builder生成的代码基本可用，我们接受修改后的代码，然后做适当修改：
const {
execSync } = require('child_process') //同步子进程
const getGitInfo = (gitMeta) => {
try {
return execSync(gitMeta)?.toString().trim();
} catch {
return "--";
}
};
const getJsContent = () => {
const consoleList = [
{
description: "提交人员",
value: getGitInfo("git show -s --format=%cn"),
},
{
description: "版本信息",
value: getGitInfo("git show -s --format=%h"),
},
{
description: "代码分支",
value: getGitInfo("git symbolic-ref --short -q HEAD"),
},
{
description: "提交说明",
value: getGitInfo("git show -s --format=%s"),
},
{
description: "提交时间",
value: getGitInfo("git show -s --format=%cd"),
},
];
};
上述代码的核心功能是通过 child_process 模块执行 Git 命令，并提取 Git 信息。
child_process是 Node.js 的一个核心模块，允许你、我们在 Node.js 中启动子进程并与之进行交互。execSync(gitMeta)执行传入的 Git 命令，返回的是一个 Buffer 对象，通过.toString()将其转换为字符串。
由于git show生成的时间是原始数据类型，我们可以将时间进行格式化，方便阅读。
Trae集成了根据注释生成代码的功能，我们可以借助这一功能继续完善代码。
{
description: "提交时间",
value: getDate(getGitInfo("git show -s --format=%cd")),
},
网页端的信息输出与js生成
把代码的打包信息直接输出在控制台是不安全的，我们并不希望所有人打开控制台都可以看到打包信息。参考vue2的数据劫持原理，我们可以对window对象的特殊属性进行数据劫持：
Object.defineProperty(window, 'info', {
get: function() {
// console.log("window的info属性被访问了")
}
})
根据上述代码的效果，当我们读取window的info属性时（相当于控制台输入info），会触发getter的回调函数。
那么，如果我们在get的方法中输出所有的git信息，然后将这段js注入打包后的index.html，就可以实现如下效果了
在控制台输入"info"，控制台打印代码的git信息。
根据上述原理，我们的getJsContent方法完善如下：
const getJsContent = () => {
const consoleList = [
// ...
];
return `(function(window){
const BUILD_INFO_CONSOLE_LIST = ${
consoleList}
Object.defineProperty(window, 'info', {
get: function() {
console.clear();
BUILD_INFO_CONSOLE_LIST.forEach(res=>{
console.log (res.description, res.value)
})
}
})
})(window)`;
};
打包完成时的js脚本注入
我们插件的最后一步就是将生成的js脚本，在打包完毕后插入项目的index.html中实现注入，这一过程的实现要根据不同的脚手架类型做不同处理。同样的，我们借助Trae-Builder快速补全代码
- webpack脚本插入
根据生成结果，我们稍微优化下代码
function webpackPlugin(jsContent) {
const createAsset = (content) => {
return {
source: () => content,
size: () => content.length
}
}
return {
apply(compiler) {
compiler.hooks.emit.tap('distInfoPlugin', (compilation) => {
// 获取 HTML 和 JS 文件的路径
const jsAsset = Object.keys(compilation.assets).find((assetPath) => assetPath.endsWith('.js'))
const htmlAsset = Object.keys(compilation.assets).find((assetPath) => assetPath.endsWith('.html'))
if (!jsAsset || !htmlAsset) return
// 生成唯一的 JS 文件路径
const jsPathParts = jsAsset.split('/')
const timestamp = Date.now().toString()
jsPathParts[jsPathParts.length - 1] = `dist-info-${
timestamp}.js`
const jsFilePath = jsPathParts.join('/')
// 修改 HTML 文件内容，插入新的 JS 文件路径
const originalHtmlContent = compilation.assets[htmlAsset]?.source()
if (!originalHtmlContent) return
const updatedHtmlContent = originalHtmlContent.replace(
/(<head[^>]*>)/,
`$1<script src="${
compiler.options.output.publicPath}${
jsFilePath}"></script>`
)
// 更新 HTML 文件内容到编译输出
compilation.assets[htmlAsset] = createAsset(updatedHtmlContent)
compilation.assets[jsFilePath] = createAsset(jsContent)
})
}
}
}
上面的代码实现了一个自定义的 Webpack 插件，用于在构建时处理 HTML 和 JavaScript 文件的输出，并动态地插入一个新的 JavaScript 文件到 HTML 中。
上面的代码使用到了webpack插件开发的一些基础知识，如果有疑问，可以参考博主的webpack插件开发文章。
- vite脚本插入
由于vite提供了transformIndexHtml钩子
将js注入到打包后的html中是非常容易的
function vitePlugin(jsContent) {
return {
name: "vite-plugin-dist-info",
transformIndexHtml(html) {
const scriptTag = `<script>${
jsContent}</script>`;
return html.replace(/<\/body>/, `${
scriptTag}</body>`);
},
};
}
如果你对vite的插件有疑问，可以参考博主的vite插件入门教程
效果验证
插件开发完毕后，我们可以在任意一个webpck5或vite项目中引入index.js中的代码，查看效果。
- webpack项目
如图，在webpack项目中引入代码（distInfo就是开发的插件代码）
然后启动项目，打开控制台，输入“info”可以看到，打包的信息已经实现了。
- vite项目
如图，在vite项目中引入代码（distInfo就是开发的插件代码）
启动项目后，输入指令“info”也可以看到git信息。
代码优化
通过上述的代码，我们已经实现了一个功能完备的网站打包信息追踪插件，但它还不完善，以下是一些可以改进的地方：
- 信息加密
生成的js脚本是明文的，这意味着用户的git信息也会被明文展示，这显然是不安全的。
为了解决上述问题，我们可以对生成的信息在编译时加密，运行时解密。
- console美化
直接通过console.log输出的信息不够醒目，在控制台与普通打印文本不好区分。我们可以通过重写log方法实现输出信息的美化:
function log (description, value) {
console.log(
"%c 信息名称 %c 信息值 ",
"background:#ff4d4f;border:1px solid #ff4d4f; padding: 1px; border-radius: 2px 0 0 2px; color: #fff",
"border:1px solid #ff4d4f; padding: 1px; border-radius: 0 2px 2px 0; color: #ff4d4f",
)
}
参考博主的console.log的美化教程
- 增加配置项
根据基础代码，我们只能通过在控制台输入"info"触发信息打印，而且不能够自定义输出信息。因此，我们可以给BuildInfoPlugin插件增加options配置项即可。
function BuildInfoPlugin(options = {
}) {
try {
const jsContent = getJsContent(options);
return isVite ? vitePlugin(jsContent) : webpackPlugin(jsContent);
} catch (err) {
console.log('BuildInfo', err);
}
}
篇幅问题，不在此文章中具体展示优化过程，感兴趣的同学可以直接fork源码。
github上传与发包
插件开发完毕后，我们可以将代码上传至gitub或直接以npm包的形式发布供其他开发者使用。
使用Trae关联github仓库
要将代码上传至github，我们首先要在github创建一个仓库
然后，根据提示在Trae中执行响应的git命令即可。
npm发包
为了能让其他小伙伴使用我们开发的插件，我们可以将代码发布至npm。发包之前，我们需要先 注册一个npm账号 。注册好后，我们在Trae的控制台输入 npm login进行账号登录。
根据提示，我们回车后会打开网页进行npm登录
登录后，我们在Trae的控制台输入npm publish，出现下图的输出信息后即可发布成功。
总结
插件概述
在本文中，我们通过Trae实现了dist-info插件的开发。dist-info是一个兼容Webpack 5和Vite项目的前端插件，能够将Git信息或自定义内容注入到HTML文件中。使用该插件后，我们可以直接在浏览器控制台查看相关信息，提升开发和调试效率。
它的使用非常简单：
npm i dist-info --dev
const DistInfo = require("dist-info");
module.exports = {
// ...
plugins: [
new DistInfo()
],
};
import {
defineConfig } from 'vite';
import distInfo from 'dist-info';
export default defineConfig({
plugins: [distInfo()],
});
如果你想自定义插件行为，可以查看发布在npm上的插件使用教程。
项目github仓库地址：https://github.com/1139874527/dist-info，欢迎各位star。
Trae的开发表现
Trae的优势
在本文的插件开发过程中，项目框架的生成和核心代码的编写几乎完全依赖于Trae的 Builder模式和 Chat模式。结合Trae独特的 注释生成代码功能，我们显著提升了开发效率，这一过程甚至超越了传统的VScode开发体验。
- Builder模式：通过Trae的Builder模式，我们能够快速搭建项目框架和配置，省去了繁琐的手动配置和初始化项目过程，极大提高了开发的启动速度。此外，Builder模式也可以根据我们的要求快速完成代码片段的编写，真正实现了“中文”编程的过程。
- Chat模式：Trae的Chat模式不仅能实时解答开发中的编程问题，还能结合我们项目中的代码片段给出对应代码问题的解决方案，大大简化了开发过程中的决策和编码环节。
- 注释生成代码：Trae的注释生成代码功能可以自动根据我们在代码中添加的注释来生成相应的代码，实现从文档到代码的快速转化，进一步提高了开发的自动化和效率。
这些功能的结合，使得Trae在提高开发效率方面远远超越了传统的VScode。对于一款AI编程工具来说，Trae的表现是非常合格的！它完全可以媲美国外的Cursor、Copilot这类AI编程工具，并且它目前是免费的！
与Vscode比较
由于Trae在实现方式和界面上与VSCode相似，很多人可能会问，Trae是否能够取代VSCode？
事实上，Trae与VSCode的产品定位有所不同。Trae是AI增强版的编程工具，专注于AI，而VSCode是一款成熟的代码编辑器，强调功能性。因此，Trae和VSCode并不是替代关系，而是可以相辅相成，共同发展。
如果我们剔除AI功能，仅就编程工具本身进行比较，我的回答是：目前Trae还无法完全取代VSCode。
相比VSCode，Trae在以下方面存在不足：
- 生态系统：VSCode有超过5万个插件，涵盖各种开发场景，而Trae的插件兼容性尚未达到这个水平。
- 稳定性：VSCode经过多年发展，已被全球开发者验证，而Trae作为新产品，稳定性仍待考验。
- 用户群体：VSCode月活跃用户超过1500万，社区支持强大，Trae的用户基数较小，解决方案积累不足。
- 高级功能：VSCode支持远程开发、Docker集成等，而Trae更多侧重代码生成，缺乏深度调试和复杂配置工具。
综上，我认为Trae作为一个代码生成、优化工具，我觉得它拥有巨大潜力，是非常合格好用的。但作为一个编程工具而言，在性能和生态兼容性方面，当前仍无法全面取代VSCode。
参与项目与代码贡献
本文中提到的插件已经基本完善，并且稳定，可以供大家使用。目前，插件已发布至npm，欢迎安装使用。
dist-info是一个简单而值得学习的项目，它仍有不少优化空间。如果你有兴趣参与维护并成为贡献者，欢迎🌟star并提交PR（合理必通过）。
插件使用地址：https://www.npmjs.com/package/dist-info
github仓库地址：https://github.com/1139874527/dist-info
