Vue团队核心成员开发的39行小工具 install-pkg 安装包,值得一学!

本文详细解析了 Vue 核心成员 Anthony Fu 开发的 install-pkg 工具,该工具仅39行源码,用于自动检测并以编程方式安装 npm 包。通过阅读,你可以学习到调试源码、开发 TypeScript npm 包、配置 GitHub Action、设置 ESLint 预设和提升版本号等技巧。文章还介绍了 execa 库的使用,并分析了 detectPackageManager 函数的工作原理。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1. 前言

Vue团队核心成员 Anthony Fu 开发的 install-pkg[2] 小工具,主文件源码仅39行,非常值得我们学习。

阅读本文,你将学到:

1. 如何学习调试源码
2. 如何开发构建一个 ts 的 npm 包
3. 如何配置 github action
4. 配置属于自己的 eslint 预设、提升版本号等
5. 学会使用 execa 执行命令
6. 等等

2. install-pkg 是什么

Install package programmatically. Detect package managers automatically (npm, yarn and pnpm).

以编程方式安装包。自动检测包管理器(npmyarnpnpm)。

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

我们看看npmjs.com @antfu/install-pkg[3] 有哪些包依赖的这个包。

我们可以发现目前只有以下这两个项目使用了。

unplugin-icons[4]@chenyueban/lint[5]

我们克隆项目来看源码。

3 克隆项目

# 推荐克隆我的项目,保证与文章同步
git clone https://github.com/lxchuan12/install-pkg-analysis.git
# npm i -g pnpm
cd install-pkg-analysis/install-pkg && pnpm i
# VSCode 直接打开当前项目
# code .

# 或者克隆官方项目
git clone https://github.com/antfu/install-pkg.git
# npm i -g pnpm
cd install-pkg && pnpm i
# VSCode 直接打开当前项目
# code .

看源码一般先看 package.json,再看 script

{
    "name": "@antfu/install-pkg",
    "version": "0.1.0",
    "scripts": {
      "start": "esno src/index.ts"
    },
}

关于调试可以看我的这篇文章:新手向:前端程序员必学基本技能——调试JS代码,这里就不再赘述了。

我们可以得知入口文件是 src/index.ts

src文件夹下有三个文件

src
- detect.ts
- index.ts
- install

接着我们看这些文件源码。

4. 源码

4.1 index.js

导出所有

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

我们来看 install.ts 文件,installPackage 方法。

4.2 installPackage 安装包

// src/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,
    },
  )
}

支持安装多个,也支持指定包管理器,支持额外的参数。

其中 github execa[6] 是执行脚本

Process execution for humans

也就是说:最终执行类似以下的脚本。

pnpm install -D --prefer-offine release-it react antd

我们接着来看 detect.ts文件 探测包管理器 detectPackageManager 函数如何实现的。

4.3 detectPackageManager 探测包管理器

根据当前目录锁文件,探测包管理器。

// src/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
}

其中 find-up[7] 查找路径。

/
└── Users
    └── install-pkg
        ├── pnpm-lock.yaml
import {findUp} from 'find-up';

console.log(await findUp('pnpm-lock.yaml'));
//=> '/Users/install-pkg/pnpm-lock.yaml'

path.basename('/Users/install-pkg/pnpm-lock.yaml') 则是 pnpm-lock.yaml

所以在有pnpm-lock.yaml文件的项目中,detectPackageManager 函数最终返回的是 pnpm

至此我们可以用一句话总结原理就是:通过锁文件自动检测使用何种包管理器(npm、yarn、pnpm),最终用 execa[8] 执行类似如下的命令。

pnpm install -D --prefer-offine release-it react antd

看完源码,我们接着来解释下 package.json 中的 scripts 命令。

5. package.json script 命令解析

{
    "name": "@antfu/install-pkg",
    "version": "0.1.0",
    "scripts": {
      "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"
    },
}

5.1 ni 神器

github ni[9]

我之前写过源码文章。

尤雨溪推荐神器 ni ,能替代 npm/yarn/pnpm ?简单好用!源码揭秘![10]

自动根据锁文件 yarn.lock / pnpm-lock.yaml / package-lock.json 检测使用 yarn / pnpm / npm 的包管理器。

nr dev --port=3000

# npm run dev -- --port=3000
# yarn run dev --port=3000
# pnpm run dev -- --port=3000
nr
# 交互式选择脚本
# interactively select the script to run
# supports https://www.npmjs.com/package/npm-scripts-info convention

nci - clean install

nci
# npm ci
# 简单说就是不更新锁文件
# yarn install --frozen-lockfile
# pnpm install --frozen-lockfile

pnpm install --frozen-lockfile[11]

5.2 esno 运行 ts

esno[12]

TypeScript / ESNext node runtime powered by esbuild

源码也不是很多。

#!/usr/bin/env node

const spawn = require('cross-spawn')
const spawnSync = spawn.sync

const register = require.resolve('esbuild-register')

const argv = process.argv.slice(2)

process.exit(spawnSync('node', ['-r', register, ...argv], { stdio: 'inherit' }).status)

esbuild-register[13]简单说:使用 esbuild 即时传输 JSX、TypeScript 和 esnext 功能

5.3 tsup 打包 ts

打包 TypeScript 库的最简单、最快的方法。

tsup[14]

5.4 bumpp 交互式提升版本号

bumpp[15]

version-bump-prompt[16]

交互式 CLI 可增加您的版本号等

5.5 eslint 预设

eslint 预设[17]

pnpm add -D eslint @antfu/eslint-config

添加 .eslintrc 文件

// .eslintrc
{
  "extends": ["@antfu"],
  "rules": {}
}

之前看其他源码发现的也很好用的 eslint 工具 xo

xo[18]

JavaScript/TypeScript linter (ESLint wrapper) with great defaults JavaScript/TypeScript linter(ESLint 包装器)具有很好的默认值

看完 scripts 命令解析,我们来看看 github action 配置。

6. github action workflows

对于github action 不熟悉的读者,可以看阮一峰老师 GitHub Actions 入门教程[19]

配置文件workflows/release[20]

构建历史github action workflow[21]

name: Release

on:
  push:
    tags:
      - 'v*'

jobs:
  release:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
        with:
          fetch-depth: 0
      - uses: actions/setup-node@v2
        with:
          node-version: '14'
          registry-url: https://registry.npmjs.org/
      - run: npm i -g pnpm @antfu/ni
      - run: nci
      - run: nr test --if-present
      - run: npx conventional-github-releaser -p angular
        env:
          CONVENTIONAL_GITHUB_RELEASER_TOKEN: ${{secrets.GITHUB_TOKEN}}

根据每次 tags 推送,执行。

# 全局安装 pnpm 和 ni
npm i -g pnpm @antfu/ni
# 如何存在 test 命令则执行
nr test --if-present

nci - clean install

nci
# npm ci
# 简单说就是不更新锁文件
# yarn install --frozen-lockfile
# pnpm install --frozen-lockfile

最后 npx conventional-github-releaser -p angularconventional-github-releaser[22]

生成 changelog

至此我们就学习完了 install-pkg[23] 包。

7. 总结

整体代码比较简单。原理就是通过锁文件自动检测使用何种包管理器(npm、yarn、pnpm),最终用 execa[24] 执行类似如下的命令。

pnpm install -D --prefer-offine release-it react antd

我们学到了:

1. 如何学习调试源码
2. 如何开发构建一个 ts 的 npm 包
3. 如何配置 github action
4. 配置属于自己的 eslint 预设、提升版本号等
5. 学会使用 execa 执行命令
6. 等等

还有各种依赖工具。

参考资料

[1]

本文仓库 https://github.com/lxchuan12/install-pkg-analysis.git,求个star^_^: https://github.com/lxchuan12/install-pkg-analysis.git

<think>好的,用户想了解如何在内网环境中搭建基于Node.jsVue开发环境。首先,我需要回忆下之前提供的参考资料,尤其是引用5提到的离线环境搭建步骤。用户可能没有外网访问权限,所以必须确保所有依赖都能在离线状态下安装。 首先,用户需要安装Node.js。根据引用2,使用nvm管理多个Node.js版本可能有用,但在内网环境下,可能需要直接下载Node.js安装包到本地,然后手动安装。需要注意将Node.jsnpm的路径添加到环境变量中,确保命令可以识别。 接下来是Vue CLI的安装。根据引用5,离线环境下需要先在外网下载好Vue CLI、webpack、yarn等依赖包,然后通过npm的离线安装命令进安装。可能需要使用npm install --offline或者指定本地缓存路径。但用户可能不知道具体如何操作,需要详细说明如何打包这些依赖并传输到内网机器。 另外,引用3提到安装vuevue-router、vue-cli的全局依赖,但离线环境下可能需要本地文件。这里需要注意,npm在离线时可以使用本地tar包或者目录来安装模块。可能需要使用npm install /path/to/package.tgz这样的命令。 还有,用户可能遇到依赖问题,比如某些包需要在线下载,这时候离线环境下如何处理?需要指导用户如何用npm的缓存机制或者预先下载所有依赖包,包括它们的子依赖。可能需要使用npm pack或npm bundle工具,或者使用nexus这样的私有仓库。 另外,引用4提到vue-cli下载模板失败的问题,在离线环境下需要避免这种情况。可能需要预先下载项目模板,或者使用离线可用的模板,或者在创建项目时指定本地路径。 最后,测试环节很重要,确保安装后能够创建和运Vue项目。可能需要用户执vue create或使用现有模板,并运npm run serve来验证环境是否正常。 需要整理步骤:1. 准备Node.js离线安装;2. 获取npm离线包;3. 安装Vue相关依赖;4. 配置项目模板;5. 测试环境。同时,要提醒用户注意路径设置和可能的权限问题,尤其是在Windows系统中。另外,可能还需要配置npm的全局安装目录和缓存目录到内网可访问的位置,如引用2中提到的node_global和node_cache文件夹的设置。</think>### 内网环境下配置 Node.js + Vue 开发环境教程 #### 、Node.js 离线安装 1. **外网下载安装包** 在外网环境中访问[Node.js 官网](https://nodejs.org/)下载对应系统的 `.msi`(Windows)或 `.pkg`(Mac)安装包,推荐选择 LTS 版本(如 v18.x)[^2]。 2. **内网安装 Node.js** 将安装包拷贝至内网机器,双击运安装程序,注意以下配置: - 安装路径选择非系统盘(如 `D:\nodejs`)避免占用 C 盘空间 - 勾选 **Add to PATH** 自动配置环境变量 3. **验证安装** 在内网终端执: ```bash node -v # 应显示版本号如 v18.17.1 npm -v # 应显示版本号如 9.6.7 ``` #### 二、离线安装 Vue 依赖 1. **外网准备依赖包** 在外网机器执以下命令生成离线包: ```bash npm install -g @vue/cli webpack webpack-cli yarn --cache ./npm_cache --packages-destination ./offline_packages ``` 将生成的 `npm_cache`(缓存文件)和 `offline_packages`(依赖包)文件夹拷贝至内网[^5]。 2. **内网安装全局工具** 在内网终端执(路径替换为实际位置): ```bash npm install --global --offline --cache ./npm_cache --prefix D:\vue_global @vue/cli webpack webpack-cli yarn ``` #### 三、配置环境变量 1. **设置全局安装路径** 修改 npm 配置避免使用默认 C 盘路径: ```bash npm config set prefix "D:\vue_global" npm config set cache "D:\vue_cache" ``` 将 `D:\vue_global`
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值