前端脚手架是什么？

它将常用的开发流程抽象为 template，通过 cli 的交互形式帮助我们对开发过程进行提效。

比如npm install就是 npm 这个脚手架工具的一个命令，它帮助我们解决了依赖下载和安装问题。
你可以想象一下，一个中大型的项目，没有依赖文件，你只能一个个在 npm 网站中手动下载依赖，先不谈会不会出错，就问你累不累？

工作原理

想要知道脚手架的工作原理，我们可以从以下三个问题入手

1. 全局安装create-react-app时发生了什么？
   在使用npm install -g create-react-app安装时，解析 package.json 中的 bin 字段，然后在全局 npm 包的 bin 目录下添加一个create-react-app指令 软链接到../lib/node_module下的包

2. 为什么全局安装create-react-app后，会添加新的命令create-react-app？

我们通过which create-react-app找到指令对应的位置为 /Users/xxx/.nvm/versions/node/v14.19.1/bin/create-react-app

cd 到/Users/xxx/.nvm/versions/node/v14.19.1/bin 目录下使用ll命令，我们发现如下输出
create-react-app -> ../lib/node_modules/create-react-app/index.js

说明create-react-app指令是一个软链接，它指向上个文件夹中的../lib/node_modules/create-react-app。

进入到../lib/node_modules/create-react-app文件夹后cat package.json发现一个bin字段的值为"create-react-app": "./index.js"，
这指定了命令行中主命令名称的字段，以及运行 cli 命令对应的 js 文件

3. 为什么create-react-app指向了一个 js 文件，我们却可以通过create-react-app命令直接去执行它？
   在../lib/node_modules/create-react-app我们会发现文件顶部有一行#!/usr/bin/env node这就是告诉操作系统到当前环境变量下找 node 来执行该代码

所以，根据以上疑问，我们可以画出脚手架的工作流程如下:

脚手架搭建

开发流程

• 创建npm项目
• 创建脚手架入口文件，最上方添加#!/usr/bin/env node
• 配置package.json,添加bin属性
• 编写脚手架代码
• 将脚手架发布到npm

使用流程

• 安装脚手架 npm install -g your-cli
• 使用脚手架

开发难点解析

• 分包: 将 复杂的系统拆分成若干模块
• 命令注册
• 参数解析
• 命令行交互
• 日志打印
• 网络通信
• 文件处理
  等…

搭建一个最简 cli

1. mkdir demo创建一个目录

2. npm init

3. 添加bin/index.js文件，并修改 package.json 中的bin-> { "react-cli": "bin/index.js" }

4. npm login 然后 npm publish
   我使用的 scoped package, 所以发布的命令需要加参数npm publish --access=public

5. npm install -g your-cli安装

脚手架本地 link 标准流程

链接本地脚手架

cd your-cli-dir
npm link

链接本地库文件（当功能比较多，做分包时用）

cd your-lib-dir
npm link
cd your-cli-dir
npm link your-lib

取消链接本地库文件

cd your-lib-dir
npm unlink
cd your-cli-dir
npm unlink your-lib