Building a Frontend Build‑Info Plugin with Trae AI: A Step‑by‑Step Guide

In modern frontend development, it is often necessary to expose build information such as the packager, build time, and Git version directly in the deployed application. The article introduces a real‑world scenario where developers repeatedly check CI/CD pipelines, manually look up version numbers, and waste time during production issue triage.

Plugin Background and Project Overview

The proposed solution is a plugin called dist‑info that automatically records build metadata and makes it accessible in both development and production environments. The plugin works with both Webpack and Vite projects.

Why Choose Trae

Trae is a free AI‑powered coding IDE from ByteDance, comparable to tools like Cursor and GitHub Copilot. It integrates AI for code completion, chat‑based assistance, and a Builder mode that can generate project scaffolding and core files from natural‑language prompts.

Using Trae to Implement the dist‑info Plugin

Development Preparation

After installing Trae (available for macOS and Windows) and syncing the VSCode configuration, the IDE presents the same extensions panel as VSCode, allowing a seamless transition.

Core Architecture

The main entry file index.js determines whether the build tool is Vite or Webpack and returns the appropriate plugin implementation:

const isVite =
  process.argv.some((arg) => arg.includes("vite")) ||
  process.env.VITE_ !== undefined;

function DistInfoPlugin() {
  try {
    // get js content (includes git info)
    const jsContent = getJsContent();
    // choose hook based on the bundler
    return isVite ? vitePlugin(jsContent) : webpackPlugin(jsContent);
  } catch (err) {
    console.log("DistInfoPlugin", err);
  }
}
module.exports.default = DistInfoPlugin;
module.exports = DistInfoPlugin;

The plugin collects Git information during the build using Node's child_process module:

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

const getGitInfo = (gitMeta) => {
  try {
    return execSync(gitMeta)?.toString().trim();
  } catch {
    return "--";
  }
};

const getJsContent = () => {
  const consoleList = [
    { description: "Commit Author", value: getGitInfo("git show -s --format=%cn") },
    { description: "Commit Hash",   value: getGitInfo("git show -s --format=%h") },
    { description: "Branch",        value: getGitInfo("git symbolic-ref --short -q HEAD") },
    { description: "Commit Message",value: getGitInfo("git show -s --format=%s") },
    { description: "Commit Date",   value: getGitInfo("git show -s --format=%cd") }
  ];
  // generate a script that defines window.info getter
  return `(function(window){
    const BUILD_INFO = ${JSON.stringify(consoleList)};
    Object.defineProperty(window, 'info', {
      get: function(){
        console.clear();
        BUILD_INFO.forEach(item=> console.log(item.description, item.value));
      }
    });
  })(window)`;
};

Webpack Integration

The Webpack plugin injects the generated script into the compiled HTML and creates a separate JS asset:

function webpackPlugin(jsContent) {
  const createAsset = (content) => ({
    source: () => content,
    size: () => content.length
  });
  return {
    apply(compiler) {
      compiler.hooks.emit.tap('distInfoPlugin', (compilation) => {
        const jsAsset = Object.keys(compilation.assets).find(p => p.endsWith('.js'));
        const htmlAsset = Object.keys(compilation.assets).find(p => p.endsWith('.html'));
        if (!jsAsset || !htmlAsset) return;
        const timestamp = Date.now();
        const newJsPath = jsAsset.replace(/\.js$/, `-dist-info-${timestamp}.js`);
        const originalHtml = compilation.assets[htmlAsset].source();
        const updatedHtml = originalHtml.replace(/(
]*>)/, `$1
`);
        compilation.assets[htmlAsset] = createAsset(updatedHtml);
        compilation.assets[newJsPath] = createAsset(jsContent);
      });
    }
  };
}

Vite Integration

Vite’s transformIndexHtml hook makes script injection straightforward:

function vitePlugin(jsContent) {
  return {
    name: "vite-plugin-dist-info",
    transformIndexHtml(html) {
      const scriptTag = `
`;
      return html.replace(/<\/body>/, `${scriptTag}
`);
    }
  };
}

Optimization Ideas

Encryption : Encrypt the injected script to avoid exposing raw Git data.

Console Styling : Use custom CSS in console.log to highlight information.

Configurable Options : Extend BuildInfoPlugin with user‑defined options for output format and trigger commands.

Publishing to GitHub and npm

After the plugin is complete, push the source to a GitHub repository and publish it as an npm package. The article walks through logging into npm via the Trae terminal, running npm login and npm publish , and provides screenshots of the process.

Conclusion

The dist‑info plugin provides a lightweight way to embed build metadata into frontend bundles, improving traceability during debugging and release verification. By leveraging Trae’s Builder and Chat modes, the entire development workflow—from project scaffolding to final publishing—can be accelerated with AI assistance.