likes
comments
collection

读39行代码的小工具 install-pkg并解析其实现

作者站长头像
站长
· 阅读数 16

本文参加了由公众号@若川视野 发起的每周源码共读活动,   点击了解详情一起参与。

这是源码共读的第20期 | # Vue团队核心成员开发的39行小工具 install-pkg 安装包

install-pkg

以编程方式安装程序包。并且自动检测包装管理器(npm、yarn和pnpm)

npm i @antfu/install-pkg

import {installPackage} from @antfu/install-pkg
await installPackage('vite', { silent: true })

也就是通过编程方式去安装某个包到本地中,它让我想起了14期remote-git-tags中的实现 , 本质上是通过代码执行去调用 命令安装

仓库

这里推荐使用川哥整理好的同步文章仓库

//川
git clone https://github.com/lxchuan12/install-pkg-analysis.git
cd install-pkg-analysis/install-pkg && pnpm i

//官方项目
git clone https://github.com/antfu/install-pkg.git
cd install-pkg && pnpm i

package.json 解析

ni

自动检测包管理工具, 使用正确的包管理器。 它可以根据你的锁文件去推断你当前的包管理器, 根据相应的命令 去做转化

相关的script:

    "prepublishOnly": "nr build",
    "dev": "nr build --watch",
    "start": "esno src/index.ts",
    "build": "tsup src/index.ts --format cjs,esm --dts --no-splitting",
    "release": "bumpp --commit --push --tag && pnpm publish",
    "lint": "eslint \"{src,test}/**/*.ts\"",
    "lint:fix": "nr lint -- --fix"

prepublishOnly

npm钩子, 在执行 npm publish 之前会执行这个命令

nr

ni 下 可执行命令, 对应的 是 npm run /yarn run / pnpm run

nr build , 如果你使用npm包管理工具,对应的就是 npm run build

esno

具有自动CJS/ESM模式和缓存的ts编译工具, 本质就是一个tsx

tsup

使用Esbuild,无需配置即可打包你的TS库

tsup src/index.ts --format cjs,esm --dts --no-splitting

读39行代码的小工具 install-pkg并解析其实现

bumpp

更好的进行版本号提升的工具,基于version-bump-prompt改造

读39行代码的小工具 install-pkg并解析其实现

生产依赖

execa

命令执行相关的库, 基于 child_process 进行了封装,使用更加友好

import {execa} from 'execa';
const {stdout} = await execa('echo', ['unicorns']);
console.log(stdout);

find-up

通过查找父目录查找文件或目录 , 字面意思 就是找到指定文件路径的工具

import path from 'node:path';
import {findUp, pathExists} from 'find-up';

console.log(await findUp('unicorn.png'));
//=> '/Users/sindresorhus/unicorn.png'

代码

index.ts

export * from './detect'
export * from './install'

统一出口,将detect 和 install的导出 从index统一导出

install.ts

import execa from 'execa'
import { detectPackageManager } from '.'

export interface InstallPackageOptions {
  cwd?: string
  dev?: boolean
  silent?: boolean
  packageManager?: string
  preferOffline?: boolean
  additionalArgs?: string[]
}

export async function installPackage(names: string | string[], options: InstallPackageOptions = {}) {
  const agent = options.packageManager || await detectPackageManager(options.cwd) || 'npm'
  if (!Array.isArray(names))
    names = [names]

  const args = options.additionalArgs || []

  if (options.preferOffline)
    args.unshift('--prefer-offline')

  return execa(
    agent,
    [
      agent === 'yarn'
        ? 'add'
        : 'install',
      options.dev ? '-D' : '',
      ...args,
      ...names,
    ].filter(Boolean),
    {
      stdio: options.silent ? 'ignore' : 'inherit',
      cwd: options.cwd,
    },
  )
}

detect.ts

import path from 'path'
import findUp from 'find-up'

export type PackageManager = 'pnpm' | 'yarn' | 'npm'

const LOCKS: Record<string, PackageManager> = {
  'pnpm-lock.yaml': 'pnpm',
  'yarn.lock': 'yarn',
  'package-lock.json': 'npm',
}

export async function detectPackageManager(cwd = process.cwd()) {
  const result = await findUp(Object.keys(LOCKS), { cwd })
  const agent = (result ? LOCKS[path.basename(result)] : null)
  return agent
}

逐行分析

const agent = options.packageManager || await detectPackageManager(options.cwd) || 'npm'
  if (!Array.isArray(names))
    names = [names]

agent 从默认的配置对象中以及 detectPackageManager 函数去读取我们使用的是什么包管理工具,不成立的情况下默认为npm, 并将第一个传入的非数组参数包装了为数组类型

import findUp from 'find-up'
export async function detectPackageManager(cwd = process.cwd()) {
  const result = await findUp(Object.keys(LOCKS), { cwd })
  const agent = (result ? LOCKS[path.basename(result)] : null)
  return agent
}

detectPackageManager 函数 通过当前执行命令的目录,使用 find-up去查找 锁文件(LOCKS),得到对应的 包管理工具, 否则为null。 知道findUp 函数是干啥的这里就很好理解了

 const args = options.additionalArgs || []

  if (options.preferOffline)
    args.unshift('--prefer-offline')

args变量 即 执行执行时的 附加参数

一条没见过的新命令: --prefer-offline

--prefer-offline将使npm跳过任何条件请求(304检查)直接使用缓存数据,只有在缓存无法匹配到的时候,才去访问网络。这样我们将依赖包添加到项目的过程就会快很多,可以理解为 优先使用本地或者全局的缓存 ,没有才进行联网安装

return execa(
    agent,
    [
      agent === 'yarn'
        ? 'add'
        : 'install',
      options.dev ? '-D' : '',
      ...args,
      ...names,
    ].filter(Boolean),
    {
      stdio: options.silent ? 'ignore' : 'inherit',
      cwd: options.cwd,
    },
  )

奇怪的Boolean

在读这一块代码时,产生了一个疑问, Boolean这干啥的,第一眼想起了装箱类型, 即它本身是一个function, 所以它被作为callback 给了filter使用。 接着我就去研究这个函数的作用,它会根据传入的参数是否有效 决定返回值。 即 1 返回 true , 0 返回false

Boolean(1)  true
Boolean(0)  false

此时就明白了, 它被作为了filter的回调函数使用, filter将数组成员依次传给Boolean, 再根据结果过滤数据! 也就是数组内的参数 如果是空字符, 或者 判断得到的空字符成员 最终被会移除

stdio

将决定输入输出流的显示,当指定silent: true , 安装包时的信息会在控制台回显, 默认是ignore 不显示。

最后execa将结果对象通过Promise返回

总结

至此 整个工具的分析就结束了, 主要文件仅39行, 却涉及到了很多知识点。

让我耳目一新的就是 filter 结合 Boolean 的用法, 又学到一招, 类似的还有之前全局总线那一期的 handlers.splice(handlers.indexOf(handler) >>> 0, 1), 查找不到的话 返回-1 >>> 0 返回的结果是4294967295 就相当于无效了, 查找到的话 任意数字 >>> 0 还是这个任意数字,省去if判断