samonxian / vite-plugin-project-info

Vite 项目信息插件，使用后会在 Conole 面板输出版本、构建时间等信息。The Vite project information plugin，which will log the version, build time and other information in the Console panel.

Vite 项目信息插件

这是一个可在浏览器 Console 中输出项目信息的 Vite 插件。 项目信息包含：

• 项目版本，对应 package.json version 字段
• 项目名称，对应 package.json name 字段
• 仓库链接, 对应 package.json repository.url 字段
• 项目负责人，对应 package.json author 字段
• 项目构建时间

如下使用即可在 Console 中输出项目信息，无需其他配置。

// vite.config.js
import { defineConfig } from 'vite';
import projectInfoPlugin from 'vite-plugin-project-info';

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

在线试用

vite-plugin-project-info

virtual:project-info 模块代码

pkg.xxx 会替换为 package.json 的字段值。

locale.xxx 会替换为插件选项 locale 的字段值。

下方的代码最终打包占用体积可忽略不计。

const COLORS = {
  primary: '#1890ff',
  success: '#52c41a',
  info: '#13c2c2',
  danger: '#f5222d',
};
/**
 * 固定模板的 console.log 输出
 * @param title log的标题
 * @param description log的描述
 * @param color 颜色
 */
function log(title, description, color) {
  if (title && description) {
    console.log(
      `%c ${title} %c ${description} %c`,
      `background:${color};border:1px solid ${color}; padding: 5px; border-radius: 4px 0 0 4px; color: #fff;`,
      `border:1px solid ${color}; padding: 5px; border-radius: 0 4px 4px 0; color: ${color};`,
      'background:transparent',
    );
  }
}

const projectInfo = {
  name: '{pkg.name}',
  version: '{pkg.version}',
  description: '{pkg.description}',
  repository: '{pkg.repository}',
  author: '{pkg.author}',
  buildTime: '{pkg.buildTime}',
  consoleLogProjectInfo() {
    log('{locale.projectVersion}', '{pkg.version}', '#eb2f96');
    log('{locale.buildTime}', '{pkg.buildTime}', COLORS.danger);
    log('{locale.projectName}', '{pkg.name}', COLORS.primary);
    log('{locale.projectDescription}', '{pkg.description}', '#722ed1');
    log('{locale.repositoryLink}', '{pkg.repository}', COLORS.success);
    log('{locale.projectAuthor}', '{pkg.author}', COLORS.info);
  },
};

projectInfo.consoleLogProjectInfo();

export default projectInfo;

插件选项

export interface ProjectInfoPluginOptions {
  entry?: string;
  locale?: {
    projectVersion?: string;
    buildTime?: string;
    projectName?: string;
    projectDescription?: string;
    projectAuthor?: string;
    repositoryLink?: string;
  };
}

• entry

  默认值为 path.resolve('src/main')，文件后缀兼容 js、jsx、ts 和 tsx 四种。 如果 js 的入口文件变更，可以修改此配置。

• locale

  本地化配置，默认值如下：

  export const DEFAULT_LOCALE = {
    projectVersion: '项目版本',
    buildTime: '构建时间',
    projectName: '项目名称',
    projectDescription: '项目描述',
    projectAuthor: '负 责 人',
    repositoryLink: '仓库链接',
  };

  英文可以直接使用 EN_LOCALE

  import { EN_LOCALE } from 'vite-plugin-project-info/lib/createCode';

其他使用方式

如果需要使用到项目信息，可以如下 import 进来：

import projectInfo from 'virtual:project-info';