敲黑板！！！pnpm && Monorepo

pnpm(performant npm) -- 后起之秀

传统管理工具的问题：

• 本地依赖无法共享，多个项目存在相同的依赖包。

官网简介：

前置概念（操作系统）：

• 软硬链接1：
• 软硬链接2：

利用硬链接做了什么？

1. 类似docker，将每一个包细化至文件，当一个包的版本有差异但文件可复用时，只新增差异的文件，且其余包也能复用别的包中的文件。
2. 一个包只安装一次（安装至本地磁盘），当别的项目需要使用时用硬链接的方式复用即可。

利用软链接做了什么？

非扁平化的node_modules目录 & 幽灵依赖：

• 软链接指向硬链接，则当硬链接改变时，软链接失效，则不会触发幽灵依赖。

安装与使用

  pnpm install => 安装所有依赖
  pnpm add axios => 安装单个依赖
  pnpm remove axios => 卸载单个依赖
  pnpm <cmd> => 运行package.json中的脚本 (npm run dev)
  pnpm store path => 查看本地全局硬链接存储目录

pnpm存储关系：

Monorepo(monolithic repository)

简介：

• 是管理项目代码的一种思路/方式，指在一个项目仓库 (repo) 中管理多个模块/包 (package)，不同于常见的每个模块建一个repo。
• 目前不少大型开源项目采用了这种方式，如Babel、React、Vue等。monorepo管理代码只要搭建一套脚手架，就能管理（构建、测试、发布）多个package。
• 在前端使用角度来看，monorepo就是把多个工程放到一个git仓库中进行管理，因此他们可以共享同一套构建流程、代码规范也可以做到统一，特别是如果存在模块间的相互引用的情况，查看代码、修改bug、调试等会更加方便。
• Monorepo里面的每个功能模块，则是像我们玩的乐高积木一样，有标准的接口，即使从这个项目中拆离出去，也能使用。

优点：

• 代码复用非常简单（共用公共依赖）
• 简化依赖管理（同级目录方便相互引用）
• 原子提交能让重构全局特性更容易（一个git）
• 跨组合作更方便（各依赖间无逻辑关联性，只有引用关联）

vue3组件库的搭建模板

• 基于pnpm搭建的Monorepo项目仓库。
• 搭建思路
  1. 初始化pnpm init -y
  2. 配置公共目录（workspace）。

       // pnpm-workspace.yaml
         packages:
           - play # 组件测试代码
           - docs # 存放文档
           - "packages/**"
       ```
     
     

  3. 新建npm配置文件.npmrc，配置幽灵依赖删除。

       // .npmrc
       // 幽灵依赖--将依赖A中的依赖同步到node_module下，
       // 避免以后依赖A中的依赖发生改变，导致无法察觉的bug
       shamefully-hoist = true
     

  4. 在公共目录下新增子仓库（packages下）
  5. 初始化子仓库，则子仓库们可共用相同的依赖，且有自己的依赖，且两两解耦。
• 具体架构：

Vue3设计及架构

• 具体架构：
  • 

传统管理工具（复习）

• npm
• cnpm
• yarn

简介：

node包管理工具，管理node中的第三方模块，在项目中也用来管理第三方依赖，（如：express、koa、axios...）。

第三方模块

• 全局模块 ：命令行中使用，所有文件路径都可以，如cli、webpack。
• 本地模块 ：开发或者线上项目使用，如package.json中的依赖。

package.json ：第三方依赖说明文件

• 初始化工作/生成该文件：npm init -y
• 常见属性：
  • 
  • 
  • 
  • dependencies ：开发生产都需要的依赖
  • devDependencies ：开发时依赖，生产打包时不参与
• 了解属性：

package-lock.json ：依赖锁文件

• 记录安装依赖项时的具体版本信息^、~、依赖包的依赖信息，安装依赖时保证版本相同。
• 记录缓存信息，若有缓存可减少安装时间。
• 属性说明：
  • 可通过 npm config get cache获取缓存文件路径
    • 再通过lock中的配置匹配，若匹配得到则直接解压后放入node_modules
    • 若匹配不到，则下载并在缓存目录中新增文件，以备下次缓存

npm(node package manager)

• 内部概念：

  • registry：镜像源/仓库，用于统一存放npm包，下载、发布包时就是的仓库就是此处。

• 关联概念

  • nrm ：node的下载源管理工具
  • nvm ：node的版本管理工具

• 命令

  • 安装：npm install

    • 
    • 安装开发时依赖
      • npm i webpack --save-dev => npm i webpack -D ：开发时依赖，生产环境不依赖
    • 安装开发时、生产时依赖
      • npm i jquery --save => npm i jquery ：开发、生产都依赖，打包时一起打入。
    • 根据package.json安装依赖 npm i
    • 原理图：
    • 原理描述：

  • 卸载：npm uninstall -D

  • 构建：npm rebuild

  • 清除缓存：npm cache clean

• 第三方依赖版本信息

  • ^1.0.2 => ^major.minor.patch
  • major(破坏性更新).minor(增加功能，修订大版本中的功能).patch(修复bug)
  • 符号 ^ ~ >= <=
    • ^ 限制大版本一致即可
    • ~ 限制中间版本一致即可
    • >=
    • <=
  • 非稳定版本
    • alpha预览版(内部测试的版本)
    • beta(公测版)
    • rc(最终测试版)

• 发布自己的npm包：

/**
 * 
 * 发布自己的npm
 *  1. npm init -y
 *  2. 配置文件，配置入口文件，包名，版本等、
 *  3. 登录npm npm adduser / npm login
 *     3.1 username password email
 *  4. npm publish .
 *  5. 下载该npm包  npm i 包名
 * 
 */

/**
 * 
 * package.json
  {
    "name": "test-push-npm",
    "version": "2.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
    },
    // 搜索关键字
    "keywords": [],
    "author": "",
    "license": "ISC"
  }
 * 
 */

cnpm

• 目的：方便国内开发人员下载国外的依赖。

yarn

• 目的：弥补早期npm<=5的缺陷，如今的yarn与npm基本无差。

npx(了解)

• 目的：
• 补充说明：

开发脚手架（了解）

• commander create from tj
  • 可以使用commander包与命令行交互npm i commander
    • 如：解析传入的参数，各种脚手架都是使用这种包。
    • 创建脚手架等。
  •