0.5.0 • Published 2 years ago

vite-plugin-project-info v0.5.0

Weekly downloads
-
License
-
Repository
github
Last release
2 years ago

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';
0.5.0

2 years ago

0.4.0

2 years ago

0.3.4

2 years ago

0.3.3

2 years ago

0.3.2

2 years ago

0.3.1

2 years ago

0.3.0

2 years ago

0.2.0

2 years ago