小项目中管理npm包版本的思路与方法

背景

笔者在最近碰到一个问题:

有一些项目没有类似jenkins的自动部署平台,前端部署都是本地执行npm run build命令生成压缩包,然后放到服务器上面,解压到nginx 目录, 但是有的时候遇到一个问题,比如项目中某个成员升级了其他组写的一个组件packageA,但是其他成员可能没有升级,导致上线后就会有一些问题,一个包还好,如果有好几个包都没有升级,那么可能导致一些意想不到的问题。

思路

首先就这个问题,我思考后有以下几个问题

  • package.json中的包名的版本有几个是用的^x.x.x的形式,不利于判断
  • 如何对比包的版本

解决

问题1

针对第一个问题解决方案就是 直接用x.x.x的方式,一个包的更新必定是至少有一个人知道这个事情才会去更新包,所以包名是可以不带任何标识的

问题2

针对第二个问题

node_modules中的版本是低的,但是package.json的版本是最新的,所以我们可以自定一个脚本判断两个版本是否一致

const path = require('path');
const projectRoot = process.cwd();
const projectPack = require(path.resolve(projectRoot, 'package.json'));
// 需要对比的包名
const modules = ['element-ui'];
const allDependencies = {
  ...(projectPack.dependencies || {}),
  ...(projectPack.devDependencies || {}),
};

modules.forEach(module => {
  try {
    const packVersion = allDependencies[module];
    // 有一些包名是有文件夹的比如@vue/cli-service,是在@vue文件夹下
    const realPath = packVersion.aplit('/');
    const pack = require(path.resolve(
      ...[projectRoot, 'node_modules', ...realPath, 'package.json'],
    ));
    const needVersions = packVersion.match(/\d+/g);
    const realVersions = pack.version.match(/\d+/g);
    for (const i in needVersions) {
      if (
        isDef(needVersions[i]) &&
        isDef(realVersions[i]) &&
        parseInt(realVersions[i]) < parseInt(needVersions[i])
      ) {
        exit(module);
      }
    }
  } catch (error) {
    exit(module);
  }
});

function exit(moduleName) {
  throw new Error(`${moduleName} 版本过低,请执行 npm i/npm install`);
}
function isDef(num) {
  return num !== null && num !== undefined;
}

package.json改造 增加check 脚本

 "scripts": {
    "check": "node build/checkNpmPackageVersion.js",
    "dev": "npm run check && vue-cli-service serve",
    "build": "npm run check && vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

不足

  • 如果包名不是纯数字的话对比有问题,因为我们公司的包名都不带alpha,beta等,所以我没有考虑
  • 有一些可以考虑和远程仓库对比,比如调npm info包名命令将结果对比

总结

到此这篇关于小项目中管理npm包版本的思路与方法的文章就介绍到这了,更多相关小项目管理npm包版本内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 小项目中管理npm包版本的思路与方法

    背景 笔者在最近碰到一个问题: 有一些项目没有类似jenkins的自动部署平台,前端部署都是本地执行npm run build命令生成压缩包,然后放到服务器上面,解压到nginx 目录, 但是有的时候遇到一个问题,比如项目中某个成员升级了其他组写的一个组件packageA,但是其他成员可能没有升级,导致上线后就会有一些问题,一个包还好,如果有好几个包都没有升级,那么可能导致一些意想不到的问题. 思路 首先就这个问题,我思考后有以下几个问题 package.json中的包名的版本有几个是用的^x.

  • package.json管理依赖包版本详解

    目录 npm版本号定义 package.json怎么识别依赖版本 不要太相信npm包的版本号 dependencies.devDependencies与peerDependencies dependencies devDependencies peerDependencies 参考 npm版本号定义 版本格式:X.Y.Z[-string]其含义为: X:主版本号 Y:次版本号 Z:修正版本号 string: 先行版本号或版本编译信息 举个例子: 6.3.2-alpha的含义为: 主版本号6,有6

  • 使用Vue-cli3.0创建的项目 如何发布npm包

    在使用vue进行项目开发时,如果我们想要发布一个包,有时候会有点迷糊,不知道应该怎么修改脚手架的默认设置.这里记录一下一些常见的操作. 创建index.js进行模块的导出 将我们需要导出的组件在index.js文件中进行统一导出,可能之前需要进行处理,是先进行全局注册Vue.component,还是用户自己注册. import App from './App.vue' export default App; 修改vue.config.js配置文件 修改publicPath的路径为相对路径 mod

  • Intellij IDEA中如何查看maven项目中所有jar包的依赖关系图

    Maven 组件界面介绍 如上图标注 1 所示,为常用的 Maven 工具栏,其中最常用的有: 第一个按钮:Reimport All Maven Projects 表示根据 pom.xml 重新载入项目.一般单我们在 pom.xml 添加了依赖包或是插件的时候,发现标注 4 的依赖区中没有看到最新写的依赖的话,可以尝试点击此按钮进行项目的重新载入. 第六个按钮:Execute Maven Goal 弹出可执行的 Maven 命令的输入框.有些情况下我们需要通过书写某些执行命令来构建项目,就可以通

  • Vue.js项目中管理每个页面的头部标签的两种方法

    在 Vue SPA 应用中,如果想要修改 HTML 的头部标签,如页面的 title ,我们只能去修改 index.html 模板文件,但是这个是全局的修改,如何为每个页面都设置不一样的 title 呢?下面介绍两种方法. 使用router.meta 在路由里面配置每个路由的地址: routes: [ { /* (首页)默认路由地址 */ path: '/', name: 'Entrance', component: Entrance, meta: { title: '首页入口' } }, {

  • Android项目中引入aar包的正确方法介绍

    目录 一.Android项目中引入aar包的方法 二.Android导入jar包 补充:Android 引入aar包后,应用图标改变了 总结 一.Android项目中引入aar包的方法 我在使用高德地图的sdk的时候,选择用引入aar包的方式,然后按照网上的教程引入.但是一直报错,我很懵逼. 这是教程 1.在build.gradle中的android{}外层添加 repositories { flatDir { dirs 'libs' } } 2.将aar包添加到项目的libs文件夹下 3.在d

  • Vue项目中使用WebUploader实现文件上传的方法

    简介: WebUploader是由 Baidu WebFE(FEX) 团队开发的一个简单的以 HTML5为主 , FLASH为辅 的现代 文件上传组件 .在现代的浏览器里面能充分发挥HTML5的优势,同时又 不摒弃主流IE浏览器 ,沿用原来的FLASH运行时, 兼容IE6+,iOS 6+, android 4+ .两套运行时,同样的调用方式,可供用户任意选用.采用 大文件分片并发上传 ,极大的提高了文件上传效率. 分片.并发 分片 与 并发 结合,将一个大文件分割成多块, 并发上传 ,极大地提高

  • webpack+vue-cli项目中引入外部非模块格式js的方法

    在开发vue的项目(我使用的是vue2),需要添加js,虽然可以通过npm install 安装插件,但是如果有一些插件并没有开源,这时候我们只有脸上宽面条了.所以我更倾向于在webpack中引入外部js文件. 1.直接引用 Note:(红色标注部分) 位置1:将页面中需要用到的js,引入进来,from 后面是该js所在的文件目录: 位置2:需要用到位置一中定义的变量Swiper; 位置3:为防止eslint严格模式下报错,需要将位置2定义的swiper再次调用一下: 以上这篇webpack+v

  • Vue 项目中遇到的跨域问题及解决方法(后台php)

    问题描述 前端 vue 框架,后台 php,百度跨域问题后台加这段代码 header("Access-Control-Allow-Origin: *"); 加了之后报这个错: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The valu

  • 在vue项目中引入高德地图及其UI组件的方法

    引入高德地图: 打开index.html,引用高德地图的JavaScript API: <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=你的API key"></script> 在"key="这里添加你申请的key,key不需要加引号. 引入高德地图UI组件,只需要在上面代码后面再加一串代码: <script

随机推荐