首页 > 其他分享 >[VUE] WebPack 打包后自动修改 dist 中 package.json 版本号

[VUE] WebPack 打包后自动修改 dist 中 package.json 版本号

时间:2023-12-22 14:12:32浏览次数:32  
标签:__ VUE dist package 版本号 json version let

我们在开发 npm 包时,开发期的 package.json 通常并不一定是发布到 npm 仓库的 package.json。这种情况下每次改版本号需要改两个地方,比较麻烦。

我一般使用 webpack 进行打包,所以有了下面这个小插件。

插件源码

modify.version.plugin.js

/** 修改版本号 webpack 插件 */
function ModifyVersionPlugin(newVersion) {
  this.newVersion = newVersion;
}

ModifyVersionPlugin.prototype.apply = function(compiler) {
  compiler.hooks.emit.tap('ModifyVersionPlugin', function(compilation) {
    let assets = compilation.assets;
    let fileNames = Object.keys(assets);
    let version = this.newVersion;
    // 此项可以根据情况开启,用来更新源码中静态变量的值为当前版本号
    // 示例: const __VERSION__ = '__package_version__'
    // 打包后 __VERSION__  变量的值将变为当前版本号
    fileNames.forEach(function(fileName) {
      if (fileName === 'index.js') {
        let asset = assets[fileName];
        let assetSource = asset.source();
        // 将代码中的 __package_version__ 变量替换为版本号
        let updatedSource = assetSource.replace(/__package_version__/, version);
        asset.source = function() {
          return updatedSource;
        };
      }
    });

    // 修改 /dist/package.json 中的版本号
    try {
      const file = './dist/package.json';
      const fs = require('fs');
      let json = JSON.parse(fs.readFileSync(file, 'utf8'));
      console.log(json)
      json.version = version;
      fs.writeFileSync(file, JSON.stringify(json, null, 2));
    } catch (e) {
      console.error(e)
    }
  }.bind(this));
};

module.exports = ModifyVersionPlugin;

使用

  • 将上面的 modify.version.plugin.js 保存到项目 package.json 同级目录中。
  • 修改 webpack 配置,在 webpack.config.js 中添加如下代码:
const ModifyVersionPlugin = require('./modify.version.plugin.js');

...

const version = require('./package.json').version
console.log('Package version: ', version)

...

module.exports.plugins = (module.exports.plugins || []).concat([
  new ModifyVersionPlugin(version),
  ...
])
...

标签:__,VUE,dist,package,版本号,json,version,let
From: https://www.cnblogs.com/yangyxd/p/17921455.html

相关文章

  • 巧妙使用Vue.extend继承组件实现el-table双击可编辑(不使用v-if和v-else)
    问题描述有一个简单的表格,产品要求实现双击可编辑看了一下网上的帖子,大多数都是搞两部分dom,一块是输入框,用于编辑状态填写;另一块是普通标签,用于在不编辑显示状态下呈现单元格文字内容。再加上一个flag标识搭配v-if和v-else去控制编辑状态、还是显示状态。大致代码如下:<el-t......
  • vue3 + java 查询数据前后端时间不一致如何解决?
    环境:vue3+springboot+mybatis+mysql 场景:后端返回的时间与前端接收到的时间,小时不一致,时间格式是古巴标准时间:"CST"解决:在Entity中时间字段上增加注解:@JsonFormat(pattern="yyyy-MM-ddHH:mm:ss",timezone="GMT+8")......
  • vue实现大文件分片上传与断点续传到七牛云
    问题:前段时间做视频上传业务,通过网页上传视频到服务器。视频大小小则几十M,大则1G+,以一般的HTTP请求发送数据的方式的话,会遇到的问题:1、文件过大,超出服务端的请求大小限制;2、请求时间过长,请求超时;3、传输中断,必须重新上传导致前功尽弃;探索过程:1、原先咨询过组里的大佬给......
  • vue3调用高德地图,实现地址,经纬度填写
    父组件引用高德地图:1<template>2<divclass="wrapper">3<divclass="box">4<divclass="form-box">5<el-form6label-position="top"7:inline=&qu......
  • 前端 vue项目启动报错 spawn cmd ENOENT 的原因以及解决方案
    前端项目启动到一半的时候卡在跳转浏览器出现了这个问题 那么问题大概率就是你环境刚配置或者配置错了的问题,这个时候只需要找到我的电脑=>属性=>高级系统设置=>环境变量=>系统变量=>PATH环境=>双击进去=>添加环境变量=> 添加这俩个 C:\Windows\System......
  • Vue + Django 使用wangeditor 上传图片 显示跨域报错
    报错:newsDetailed:1 AccesstoXMLHttpRequestat'http://www.py32api.com:8000/users/uploadFile/'fromorigin'http://localhost:8080'hasbeenblockedbyCORSpolicy:RequestheaderfieldtokenisnotallowedbyAccess-Control-Allow-Head......
  • VUE 图片识别
    1、安装依赖//安装Element-UInpminstallelement-ui--save//安装ocr和ocrdetnpmi@paddlejs-models/[email protected]@paddlejs-models/[email protected]、完整代码<!--*@Descripttion:图片识别*@version:0.0.1*@Author:PengShuai*@Date......
  • Vue插件
    功能:用于增强vue本质:包含install方法的一个对象,install的第一个参数是Vue,第二个以后的参数是插件使用者传递的数据。 定义插件(新建一个plugins.js文件):exportdefault{install(Vue,x,y,z){console.log(x,y,z)//全局过滤器Vue.filter('m......
  • Vue3实现电商放大镜效果
    效果实现:功能拆解:左侧滑块跟随鼠标移动右则大图放大效果实现鼠标移入控制滑块和大图显示隐藏滑块跟随鼠标移动思路:获取到当前的鼠标在盒子内的相对位置(useMouseInElement),控制滑块跟随鼠标移动(left/top)获取鼠标相对位置控制滑块跟随移动有效移动范围内的计算逻辑......
  • vue-quill
    官网:https://vueup.github.io/vue-quill/引入vue-quill当前版本:"@vueup/vue-quill":"^1.2.0"npminstall@vueup/vue-quill@latest全局设置import{QuillEditor}from'@vueup/vue-quill';constapp=createApp(App);app.component(......