0%

WebPack 版本小插件 Vendor Version Plugin

前端项目打包发布后,时间一久,项目上出了问题,就很难知道当时的打包状态,甚至什么时候发的版本都忘了。

介绍一个本人开发的插件,每次打包时,记录打包时依赖库的版本号信息,和打包时间,可以给事后定位问题多带来一点点信息。

例如:

/**  build at 2022-05-17 14:57:45 ,  version info : {"react":"16.8.0","lodash":"4.17.21"} */
// ... 你的代码

插件 Github 地址 : https://github.com/ada87/vendor-version

安装

npm install --save-dev verdor-version

使用

webpack.config.js 里面加入:

const VerdorVersionPlugin = require('verdor-version');

module.exports = {
    ...
    plugins: [new VerdorVersionPlugin()],
}

参数

构造方法支持传入一个对象作为参数,用于设定注释信息的一些特性:

名称 说明 默认
footer boolean 信息位置:true : 代码下面, 默认生成在编译后的代码上面 false
banner string 自定义字串,拼在信息前面
说明: 没有安全判断,不要传 */ 之类的字段阻断注释!
null
dependencies string[] 指需要生成版本信息的依赖名称,传入一个数组 从当前项目 package.json 的 dependencies 中获取
variable string 在 production 模式中, 使用一个变量展示信息. “_v_v”

示例:

const VerdorVersionPlugin = require('verdor-version');

module.exports = {
    ...
    plugins: [new VerdorVersionPlugin({
        banner:'My Name',
        // footer: true,
        dependencies:['lodash','react']

    })],
}

说明

由于在 production 模式中,注释会被清理掉,所以在 production 代码是以 var 变量方式插入的