这是一个可在浏览器 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()],
});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_LOCALEimport { EN_LOCALE } from 'vite-plugin-project-info/lib/createCode';
如果需要使用到项目信息，可以如下 import 进来：
import projectInfo from 'virtual:project-info';
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent