快捷導(dǎo)航

小項(xiàng)目中管理npm包版本的思路與方法

更新時(shí)間：2021年06月08日 10:23:49 作者：Vincent就是我65724

這篇文章主要給大家介紹了關(guān)于小項(xiàng)目中該如何管理npm包版本的思路與方法,npm包版本管理是非常重要的，文章通過示例代碼介紹的很詳細(xì),需要的朋友可以參考下

背景

筆者在最近碰到一個(gè)問題：

有一些項(xiàng)目沒有類似jenkins的自動(dòng)部署平臺(tái)，前端部署都是本地執(zhí)行npm run build命令生成壓縮包，然后放到服務(wù)器上面，解壓到nginx 目錄, 但是有的時(shí)候遇到一個(gè)問題，比如項(xiàng)目中某個(gè)成員升級了其他組寫的一個(gè)組件packageA，但是其他成員可能沒有升級，導(dǎo)致上線后就會(huì)有一些問題，一個(gè)包還好，如果有好幾個(gè)包都沒有升級，那么可能導(dǎo)致一些意想不到的問題。

思路

首先就這個(gè)問題，我思考后有以下幾個(gè)問題

package.json中的包名的版本有幾個(gè)是用的^x.x.x的形式，不利于判斷
如何對比包的版本

解決

問題1

針對第一個(gè)問題解決方案就是直接用x.x.x的方式，一個(gè)包的更新必定是至少有一個(gè)人知道這個(gè)事情才會(huì)去更新包，所以包名是可以不帶任何標(biāo)識(shí)的

問題2

針對第二個(gè)問題

node_modules中的版本是低的，但是package.json的版本是最新的，所以我們可以自定一個(gè)腳本判斷兩個(gè)版本是否一致

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} 版本過低，請執(zhí)行 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"
  },

不足