实现自动扫描工作区npm包并同步cnpm

简介: 前言在开发一个多npm包的项目时,时常会一次更新多个包的代码,再批量发布到 npm 镜像源后。由于国内网络环境的原因,大部分都会使用淘宝的镜像源进行依赖安装,为了确保发布后,通过淘宝源能够顺利的安装,通常会手动同步一下cnpm sync vue react但在一些大型的 monorepo 的多包工程里,手动输入包名是一件非常繁琐的事情,所以准备把输入的过程简化一下,改成自动扫描工作区的包名,然后自动同步。进而有了这个工具工具的使用直接通过 npx 运行即可,将自动扫描所有的包

前言

在开发一个多npm包的项目时,时常会一次更新多个包的代码,再批量发布到 npm 镜像源后。

由于国内网络环境的原因,大部分都会使用淘宝的镜像源进行依赖安装,为了确保发布后,通过淘宝源能够顺利的安装,通常会手动同步一下

cnpm sync vue react

但在一些大型的 monorepo 的多包工程里,手动输入包名是一件非常繁琐的事情,所以准备把输入的过程简化一下,改成自动扫描工作区的包名,然后自动同步。

进而有了这个工具

工具的使用

直接通过 npx 运行即可,将自动扫描所有的包

npx cnnc

示例结果 如下

image.png

当然也同样支持手动传入要更新的包

npx cncc vue react

如果使用频率较高,也可全局安装npm i -g cnnc

这样可以直接通过cnnccs命令调用

image.png

实现原理

核心代码不到20行,下面详细的拆解一下,便于学习与理解

主要分为3部分

  • 工作区的包扫描
  • 过滤出合法的包
  • 调用 cnpm 同步

工作区的包扫描

主要目的就是扫描工作区所有的 package.json 文件,然后提取出包名(不包含 node_modules,build 等目录下的文件)

这里可以 fs.readdirSync 实现一个递归的扫描,也可以用fast-glob,图方便我这里选择后者,也是目前目录扫描用得较广泛的一个包

const fg = require('fast-glob')
const pkgNames = []
// 通过glob 取所有package.json
fg.sync('./**/package.json', {
  ignore: [
    '**/node_modules',
    '**/dist',
    '**/build',
    '**/test',
    // 省略更多的无关目录...
  ],
  absolute: true
}).forEach((file) => {
  const { name } = require(file)
  pkgNames.push(name)
})

通常工作区里有很多无关的目录,比如node_modulesbuilddisttest等,这些目录下的package.json都不需要同步,所以可以通过ignore参数来忽略掉,避免不必要的扫描(否则 node_modules 套 node_modules 会增加扫描时间,部分目录是软链的话也会导致扫描路径的异常)

过滤出合法的包

有些package.json会包含 "private": true 内容,表明为私有的包,不会发布到npm镜像源,所以需要过滤掉

// 省略其它代码
globResult.forEach((file) => {
  const { name, private } = require(file)
  if (!private) {
    pkgNames.push(name)
  }
})

调用 cnpm 同步

最后一步就是调用cnpm sync命令,这里可以通过child_process模块来实现

通过spawn方法,可以直接调用命令行命令,然后通过stdio: 'inherit'将命令行的输出直接打印到终端中

const { spawn } = require('child_process')
const { promisify } = require('util')
function CnpmSync(...names) {
  return promisify(spawn)('npx', ['cnpm', 'sync', ...names], {
    cwd: __dirname,
    stdio: 'inherit'
  })
}

为防止用户没有全局安装cnpm,这里通过npx cnpm sync的方式来调用,这样就不需要用户自己安装了

同时可以将cnpm作为包dependencies依赖安装,通过cwd: __dirname参数,将指令运行目录指定为当前目录,这样npx cnpm执行时,就会去cncc目录的node_modules下找到cnpm命令,从而实现调用,不需要重复的在全局进行依赖的安装,大大提升指令执行速度

最后

工具原理很简单,解决的问题也非常明确,希望能够帮助读者省下几分钟的时间,提升开发的幸福度

当然工具还有很多可优化的点,比如先通过对比 npm 和 cnpm 的版本号,如果一致就不需要同步了,这样可以大大加快同步的速度

目前由于网络原因从 npm 镜像源拉包版本信息相对较慢,所以本期没有加这个功能,读者如果有更好的建议,欢迎评论区交流

同时可以将这个指令放在 "npm postpublish" 钩子中,这样发布后自动触发同步,更加省心

相关文章
|
6月前
|
存储 JavaScript 前端开发
在NodeJS中使用npm包进行JS代码的混淆加密
总的来说,使用“javascript-obfuscator”包可以帮助我们在Node.js中轻松地混淆JavaScript代码。通过合理的配置,我们可以使混淆后的代码更难以理解,从而提高代码的保密性。
515 9
|
JavaScript 前端开发 Java
npm学习一:npm 包管理工具 学习、使用。
这篇文章介绍了npm的基础知识和常用命令,包括安装包、查看包信息、管理依赖等操作,并提供了如何删除npm安装的镜像以及如何彻底删除node_modules文件夹的具体步骤。
300 2
|
9月前
|
存储 资源调度 JavaScript
npm、cnpm 和 pnpm 是三种常用的 Node.js 包管理工具
npm、cnpm 和 pnpm 是三种常用的 Node.js 包管理工具。npm 是官方默认的包管理器,提供依赖管理、安装和更新等功能;cnpm 是由阿里巴巴开发的 npm 镜像,专为中国大陆用户优化,解决下载速度慢的问题;pnpm 通过硬链接技术提高安装速度并节省磁盘空间,特别适合磁盘资源紧张的环境。三者命令类似,但各有特色,开发者可根据需求选择合适的工具。
942 5
|
JavaScript 前端开发 Java
npm学习一:npm 包管理工具 学习、使用。
这篇文章是关于npm包管理工具的学习、使用指南,包括npm概述、基础命令和如何安装webpack。
343 3
npm学习一:npm 包管理工具 学习、使用。
|
数据安全/隐私保护
发布一个npm包
发布一个npm包
297 2
|
12月前
|
资源调度 前端开发 安全
前端实战:基于Verdaccio搭建私有npm仓库,轻松上传与下载自定义npm插件包
前端实战:基于Verdaccio搭建私有npm仓库,轻松上传与下载自定义npm插件包
852 0
|
JavaScript
request to https://registry.npm.taobao.org/cnpm failed, reason: certificate has expired
request to https://registry.npm.taobao.org/cnpm failed, reason: certificate has expired
590 2
NPM——删除已发布的包
NPM——删除已发布的包
293 1
|
JavaScript 前端开发 开发者
从零到一:教你如何发布自己的npm插件包
从零到一:教你如何发布自己的npm插件包
|
JavaScript
GitHub——自动发布NPM包
GitHub——自动发布NPM包
193 0

热门文章

最新文章

推荐镜像

更多
  • NPM