npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

inject-project-info

v1.0.0

Published

一个工具类插件。别提供了webpack 插件版本和vite 插件版本。打包项目时注入git仓库信息和打包时间等,可在控制台日志查看,方便定位版本问题。

Downloads

3

Readme

inject-project-info

一个工具类插件,分别提供了 webpack 插件 版本和**vite 插件**版本。打包项目时自动注入项目打包信息,可在控制台日志查看,方便定位版本问题。项目打包信息包括:git 仓库信息、打包时间和用户指定的任意信息。

😈 前提: 在配置文件中引入使用插件,打包项目时(npm run build),插件会自动将项目信息的代码通过 scirpt 标签动态注入到打包产物的 html 中。所以也要求业务代码的打包产物是有 html 文件的。(业务项目都有吧 😏。。。)

INSTALL

 // npm
 npm i inject-project-info -D
 // pnpm
 pnpm add inject-project-info -D

USAGE

结合打包工具 webpack 和 vite 使用,分别提供对应的插件。

export interface Options {
  isLog?: boolean;
  timeout?: boolean | number;
  isLogLastCommitMessage?: boolean;
  extraLogInfo?: IExtraLogInfo[];
}

export interface IExtraLogInfo {
    label: string;
    value: string;
}

// webpack plugin
new InjectProjectInfoWebpackPlugin(options: Options),
// vite plugin
injectProjectInfoVitePlugin(options: Options),

1. 结合 webpack 使用

1.1. webpack 构建的项目使用示例:

// webpack.config.js (webpack配置文件)

const InjectProjectInfoWebpackPlugin = require('inject-project-info/webpack');

module.exports = {
  // ...其他配置
  plugins: [
    new InjectProjectInfoWebpackPlugin({
      isLog: process.env.NODE_ENV !== 'development', // 只在生产模式注入项目信息
    }),
  ],
};

1.2. vue-cli 创建的项目(底层也是基于 webpack 构建工具)使用示例:

// vue.config.js (配置文件)

const InjectProjectInfoWebpackPlugin = require("inject-project-info/webpack");

module.exports = {
  // ...其他配置
  configureWebpack: () => {
    new InjectProjectInfoWebpackPlugin({
      isLog: process.env.NODE_ENV !== "development", // 只在生产模式注入项目信息
    }),
  },
};

2. 结合 vite 使用

vite 构建的项目使用示例:

// vite.config.js (vite配置文件)

import { defineConfig } from 'vite';
import injectProjectInfoVitePlugin from 'inject-project-info/vite';

export default defineConfig({
  // ...其他配置
  plugins: [
    injectProjectInfoVitePlugin({
      isLog: !process.argv.includes('development'), // 只在生产模式注入项目信息。
    }),
  ],
});

特别说明:因为 vite 项目在 vite.config.js 获取 process.env.NODE_ENV 为 undefined,需要使用其他方法判断是否是生产环境。 可使用 cross-env 定义环境变量,或更简单点,在 package.json 的生产构建命令,必须显示指定--mode prodution 参数,则使用 process.argv.includes('production')判断是否是生产环境。示例如下:

// package.json示例
{
  "scripts": {
    "dev": "vite --mode development",
    "build": "vue-tsc && vite build --mode production",
    "preview": "vite preview"
  }
}

参数说明

options

| 参数名称 | 说明 | 类型 | 默认值 | | :--------------------- | -----------------------------------------------------------------------------------------------: | ----------------: | -----: | | isLog | 控制插件是否注入项目打包信息,并打印到控制台。推荐在生产环境开启,开发环境关闭 | boolean | true | | timeout | 控制控制台是否延迟打印打包信息。传 false 可关闭,传数值设置延迟 x(ms)打印 | boolean 或 number | 2000 | | isLogLastCommitMessage | 是否打印最新提交记录的 commit message。考虑信息敏感原因建议关闭 | boolean | false | | extraLogInfo | 用户额外指定的打印信息。比如有维护 package.json 的版本号的项目,可打印当前 package.json 的版本号 | IExtraLogInfo[] | [] |

extraLogInfo

| 参数名称 | 说明 | 类型 | 默认值 | | :------- | -----------: | -----: | -----: | | label | 信息左边标题 | string | '' | | value | 信息右边内容 | string | '' |

效果

包括以下信息:

  • 项目名称 -> git 分支
  • 最近一次提交记录:提交人 -> 提交时间(commit message 可能为敏感信息不建议不展示)。
  • 打包时间
  • 用户额外指定的打印信息

下方代码示例及其对应的效果图展示如下:

new InjectProjectInfoWebpackPlugin({
  timeout: 3000, // 延迟3s打印
  isLog: process.env.NODE_ENV !== "development", // 只在开发环境开启
  // isLogLastCommitMessage: true,
  extraLogInfo: [ // 用户额外指定的打印信息
    {
      label: "Version",
      value: require("./package.json").version,
    },
    {
      label: "其他信息",
      value: "需要打印什么就打印什么",
    },
  ],
}),

Todos

  1. 内置实现打印项目构建依赖实际版本。
  2. commit 信息打印 commit hash