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

这是源码共读的第16期，链接：juejin.cn/post/708314…

1.前言

本篇笔记，带你了解一些源码库是怎么强制管理项目是用哪种包管理器

2.准备

2.1团队协作痛点

我们项目开发时，常常需要安装依赖，虽然一般用readme.md等文档可以说明。但是，人们总是不经意会用错包管理器。所以我们需要借助工具（代码）来强制约束。。让我们来看看一些优秀的源码库是怎么进行强制包管理的。

2.2借鉴案例

看看Vue3是怎么限制的

这段代码的意思就是正则校验校验是否是通过pnpm 运行的preinstall 指令;这里的process.env.npm_execpath是如下下代码

npm 运行 pnpm 运行

但是，有个问题，我们不能每个项目都拷贝上面一份代码。这样，太不高效了。讓我們看看vite是处理的

看看vite是怎么限制做得

vite直接引入一个only-allow包。

  //Add a preinstall script to your project's package.json.
    {
      "scripts": {
        "preinstall": "npx only-allow pnpm"
      }
    }

only-allow库的作用来判断包管理器的。

3.源码了解

3.1准备

  # 推荐克隆我的源码库
    git clone https://github.com/lxchuan12/only-allow-analysis.git
    cd only-allow-analysis/only-allow
    # npm i -g pnpm
    pnpm i

    # 或者克隆官方仓库
    git clone https://github.com/pnpm/only-allow.git
    cd only-allow
    # npm i -g pnpm
    pnpm i

3.2VS断点调试

ctrl+shift+p搜索auto attach开启智能调试功能，添加preinstall 钩子使其运行一下bin.js

// only-allow/package.json
{
  "scripts": {
    "preinstall": "node bin.js pnpm"  //注意这个 pnpm
  },
}

再到bin.js打上断点方便调试：

接下来，我们只需要打开终端并随便输入一个不是pnpm的包管理器来进行安装即可：yarn add xx 因为被断点挡住所以此时运行会暂停，上方会出现几个调试相关按钮：

Ps:大家在nodeJS断点不熟的时候，可以先写一些demo.js来熟悉下vscode的断点调试

3.3 阅读only-allow的readme.md文件

一般，我们了解一个库，先看readme.md文件

Force a specific package manager to be used on a project

如果你想强制yarn，如下

  {
  "scripts": {
    "preinstall": "npx only-allow yarn"
  }
}

3.2only-allow 源码如下

  #!/usr/bin/env node
const whichPMRuns = require('which-pm-runs')
const boxen = require('boxen')

const argv = process.argv.slice(2)
if (argv.length === 0) {
  console.log('Please specify the wanted package manager: only-allow <npm|pnpm|yarn>')
  process.exit(1)
}
const wantedPM = argv[0]
if (wantedPM !== 'npm' && wantedPM !== 'pnpm' && wantedPM !== 'yarn') {
  console.log(`"${wantedPM}" is not a valid package manager. Available package managers are: npm, pnpm, or yarn.`)
  process.exit(1)
}
const usedPM = whichPMRuns()
if (usedPM && usedPM.name !== wantedPM) {
  const boxenOpts = { borderColor: 'red', borderStyle: 'double', padding: 1 }
  switch (wantedPM) {
    case 'npm':
      console.log(boxen('Use "npm install" for installation in this project', boxenOpts))
      break
    case 'pnpm':
      console.log(boxen(`Use "pnpm install" for installation in this project.

If you don't have pnpm, install it via "npm i -g pnpm".
For more details, go to https://pnpm.js.org/`, boxenOpts))
      break
    case 'yarn':
      console.log(boxen(`Use "yarn" for installation in this project.

If you don't have Yarn, install it via "npm i -g yarn".
For more details, go to https://yarnpkg.com/`, boxenOpts))
      break
  }
  process.exit(1)
}

3.3whichPMRuns 源码学习

whichPMRuns 获取当前运行的是哪个包管理器

贴下这个库的源码从 vue3 和 vite 源码中，我学到了一行代码统一规范团队包管理器的神器

大家可以打断点，调到这个库里看userAgent ;pmSpec等内容

3.4boxen 库终端错误提示框的作用

4.学习&参考资源

5.总结和收货

了解了vscode nodeJS断点 👍
了解了preinstall 钩子；在代码install之前先实现统一包管理器规范
only-allow源码阅读
which-pm-runs 库了解
了解process对象

PS：上面两个包，代码不多。但是功能感觉还是强大的。👍

【若川视野 x 源码共读】第16期 | vue3 & vite 源码中的一行代码统一团队包管理器规范