yarn 安装并保存_深入理解js包管理工具yarn

关于yarn

yarn和npm一样也是JavaScript包管理工具，同样我们还发现有cnpm、pnpm等等包管理工具，包管理工具有一个就够了，为什么又会有这么多轮子出现呢？

为什么是yarn？它和其它工具的区别在哪里？

Tip：这里对比的npm是指npm2版本

和npm区别

• yarn在下载和安装依赖包采用的是多线程的方式，而npm是单线程的方式执行，速度上就拉开了差距
• yarn会在用户本地缓存已下载过的依赖包，优先会从缓存中读取依赖包，只有本地缓存不存在的情况才会采取远端请求的方式；反观npm则是全量请求，速度上再次拉开差距
• yarn把所有的依赖躺平至同级，有效的减少了相同依赖包重复下载的情况，加快了下载速度而且也减少了node_modules的体积；反观npm则是严格的根据依赖树下载并放置到对应位置，导致相同的包多次下载、node_modules体积大的问题

和cnpm区别

• cnpm国内镜像速度更快（其他工具也可以修改源地址）
• cnpm将所有项目下载的包收拢在自己的缓存文件夹中，通过软链接把依赖包放到对应项目的node_modules中

和pnpm区别

• 和yarn一样有一个统一管理依赖包的目录
• pnpm保留了npm2版本原有的依赖树结构，但是node_modules下所有的依赖包都是通过软连接的方式保存

从做一个简单yarn来认识yarn

第一步 - 下载

一个项目的依赖包需要有指定文件来说明，JavaScript包管理工具使用package.json做依赖包说明的入口。

{
    
    "dependencies": {
    
        "lodash": "4.17.20"
    }
}

以上面的package.json为例，我们可以直接识别package.json直接下载对应的包。

import fetch from 'node-fetch';

function fetchPackage(packageJson) {
    
  const entries = Object.entries(packageJson.dependencies);
  entries.forEach(async ([key, version]) => {
    
    const url = `https://registry.yarnpkg.com/${
    key}/-/${
    key}-${
    version}.tgz`,
    const response = await fetch(url);
    
    if (!response.ok) {
    
      throw new Error(`Couldn't fetch package "${
    reference}"`);
    }
    
    return await response.buffer();
  });
}

接下来我们再看看另外一种情况：

{
    
    "dependencies": {
    
        "lodash": "4.17.20",
        "customer-package": "../../customer-package"
    }
}

"customer-package": "../../customer-package"在我们的代码中已经不能正常工作了。所以我们需要做代码的改造：

import fetch from 'node-fetch';
import fs from 'fs-extra';

function fetchPackage(packageJson) {
    
  const entries = Object.entries(packageJson.dependencies);
  entries.forEach(async ([key, version]) => {
    
    // 文件路径解析直接复制文件
    if ([`/`, `./`, `../`].some(prefix => version.startsWith(prefix))) {
    
      return await fs.readFile(version);
    }
    
    // 非文件路径直接请求远端地址
    // ...old code
  });
} 

第二步 - 灵活匹配规则

目前我们的代码可以正常的下载固定版本的依赖包、文件路径。但是例如："react": "^15.6.0"这种情况我们是不支持的，而且我们可以知道这个表达式代表了从15.6.0版本到15.7.0内所有的包版本。理论上我们应该安装在这个范围中最新版本的包，所以我们增加一个新的方法：

import semver from 'semver';

async function getPinnedReference(name, version) {
    
  // 首先要验证版本号是否符合规范
  if (semver.validRange(version) && !semver.valid(version)) {
    
    // 获取依赖包所有版本号
    const response = await fetch(`https://registry.yarnpkg.com/${
    name}`);
    const info = await response.json();
    const versions = Object.keys(info.versions);
    // 匹配符合规范最新的版本号
    const maxSatisfying = semver.maxSatisfying(versions, reference);

    if (maxSatisfying === null)
      throw new Error(
        `Couldn't find a version matching "${
    version}" for package "${
    name}"`
      );

    reference = maxSatisfying;
  }

  return {
     name, reference };
}

function fetchPackage(packageJson) {
    
  const entries = Object.entries(packageJson.dependencies);
  
  entries.forEach(async ([name, version]) => {
    
    // 文件路径解析直接复制文件
    // ...old code
    
    let realVersion = version;
    // 如果版本号以 ~ 和 ^ 开头则获取最新版本的包
    if (version.startsWith('~') || version.startsWith('^')) {
    
      const {
     reference } = getPinnedReference(name, version);
      realVersion = reference;
    }
    
    // 非文件路径直接请求远端地址
    // ...old code
  });
}

那么这样我们就可以支持用