字节最新AI 版IDE：用Trae开发网站打包信息追踪插件，国产版Cursor表现如何？

最新推荐文章于 2025-04-14 06:00:00 发布

奇舞周刊

最新推荐文章于 2025-04-14 06:00:00 发布

阅读量331

点赞数

文章标签：人工智能 ide

原文链接：https://mp.weixin.qq.com/s?__biz=Mzg4MTYwMzY1Mw==&mid=2247514508&idx=1&sn=a0fc4c5957689505f76b0e8fb141ac36&chksm=ce1249440727d80360029fd13bcc2077273b491118febe8571d836ce888afecd16a692604ccf&scene=126&sessionid=0

版权

点击关注公众号，“技术干货” 及时达！

插件背景及项目概述

在现代前端开发中，我们常常需要获取当前线上环境的代码构建信息，如项目打包人、打包时间、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。

❝
官方介绍：docs.trae.ai/docs/what-i…^[1]
❞

使用 Trae 实现 dist-info 插件

开发前准备

「Trae 支持 mac 和 windows 版本」，我们根据官方的下载地址^[2]安装软件。安装 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的回调函数。那么，如果我们在 getter 的方法中输出所有的 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 插件开发文章^[3]。
❞

「vite 脚本插入」

由于 vite 提供了 transformIndexHtml 钩子^[4]

将 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 插件入门教程^[5]
❞

效果验证

插件开发完毕后，我们可以在任意一个 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 的美化教程^[6]
❞

「增加配置项」

根据基础代码，我们只能通过在控制台输入 "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.com/1139874527/…^[7]
❞

github 上传与发包

插件开发完毕后，我们可以将代码上传至gitub或直接以npm包的形式发布供其他开发者使用。

使用 Trae 关联 github 仓库

要将代码上传至 github，我们首先要在 github 创建一个仓库

然后，根据提示在 Trae 中执行响应的 git 命令即可。

npm 发包

为了能让其他小伙伴使用我们开发的插件，我们可以将代码发布至 npm。发包之前，我们需要先注册一个 npm 账号^[8]。注册好后，我们在 Trae 的控制台输入 「npm login」 进行账号登录。

根据提示，我们回车后会打开网页进行 npm 登录

登录后，我们在 Trae 的控制台输入 「npm publish」，出现下图的输出信息后即可发布成功。

总结

插件概述

在本文中，我们通过 Trae 实现了 dist-info 插件的开发。dist-info 是一个兼容 Webpack 5 和 Vite 项目的前端插件，能够将 Git 信息或自定义内容注入到 HTML 文件中。使用该插件后，我们可以直接在浏览器控制台查看相关信息，提升开发和调试效率。

它的使用非常简单：

npm  i dist-info --dev

在 webpack 项目中使用

const DistInfo = require("dist-info");
module.exports = {
  // ...
  plugins: [
    new DistInfo()
  ],
};

在 vite 项目中使用

import { defineConfig } from 'vite';
import distInfo from 'dist-info';

export default defineConfig({
  plugins: [distInfo()],
});

❝
如果你想自定义插件行为，可以查看发布在 npm 上的插件使用教程^[9]。

项目 github 仓库地址：github.com/1139874527/…^[10]，欢迎各位 star。
❞

Trae 的开发表现

Trae 的优势

在本文的插件开发过程中，项目框架的生成和核心代码的编写几乎完全依赖于 Trae 的 「Builder 模式」和 「Chat 模式」。结合 Trae 独特的「注释生成代码功能」，我们显著提升了开发效率，这一过程甚至超越了传统的VScode开发体验。

「Builder 模式」：通过 Trae 的Builder模式，我们能够快速搭建项目框架和配置，省去了繁琐的手动配置和初始化项目过程，极大提高了开发的启动速度。此外，Builder模式也可以根据我们的要求快速完成代码片段的编写，真正实现了 “中文” 编程的过程。
「Chat 模式」：Trae的Chat模式不仅能实时解答开发中的编程问题，还能结合我们项目中的代码片段给出对应代码问题的解决方案，大大简化了开发过程中的决策和编码环节。
「注释生成代码」：Trae的注释生成代码功能可以自动根据我们在代码中添加的注释来生成相应的代码，实现从文档到代码的快速转化，进一步提高了开发的自动化和效率。

这些功能的结合，使得 Trae 在提高开发效率方面远远超越了传统的 VScode。对于一款 AI 编程工具来说，Trae 的表现是非常合格的！它完全可以媲美国外的‌Cursor、Copilot这类 AI 编程工具，并且它目前是「免费」的！