日常工作中，我们接触过很多脚手架，例如：vue-cli , create-react-app等。
而在一些大厂的工作流程中，脚手架扮演着非常重要的工具角色，从项目创建到构建的发布都可以使用本地脚手架工具完成。

本文将以一个简单的demo，手把手教你脚手架原理，构建自己的超简单脚手架~~

## 控制台命令原理
为什么我们在控制台输入 `vue create vue-test`之后，会执行对应的命令呢？有没有想过这个问题？
![yuque_mind.jpeg](https://wepie-1254951306.cos.ap-shanghai.myqcloud.com/2022-11-29/0VlnmgFwZFT7dFsBOwtK/yuque_mind.jpeg)

可以看到，`vue`这个命令实际上是会在环境变量内找到对应的执行文件，执行文件会指向实际链接的文件，然后去执行指定的文件。

### 安装包时，为什么会注册命令
> 使用 `vue`命令前，我们需要先进行全局安装：`npm i -g @vue/cli`


下载完成后，`npm`会根据`package.json`下的`bin`字段设置对应的软链接
文件前面的`l`代表是软连接
也就是执行`vue`命令时，会执行`*/bin/vue.js`文件
![image.png](https://wepie-1254951306.cos.ap-shanghai.myqcloud.com/2022-11-29/nmkJDoTqWYpTRNFHvoNe/image.png)
![image (1).png](https://wepie-1254951306.cos.ap-shanghai.myqcloud.com/2022-11-29/CNHmKRUTJRw6P1kPdL1d/image%20%281%29.png)
### 为什么可以执行 js 文件
我们知道`js`文件，是需要`node`执行的，那么`vue.js`是一个文件，为什么可以进行自动运行呢？
可以做一个小实验：

- 创建一个 `test.js`的文件，并写入 `console.log('Hello Test!!')`
- 使用 `node`执行：`node ./test.js`，正常输出 `Hello Test!!`

- 设置 `test.js`文件可执行：`chmod 777 ./test.js`
- 在`test.js`文件顶部加入：`#!/usr/bin/env node`
- 直接执行`test.js`文件，发现会输出：`Hello Test!!`

我们看到，只需要头部设置`#!/usr/bin/env node`就可以直接运行当前文件。
这是因为上述描述会指定运行时，找到 `node`的环境变量地址，然后以`node`运行本文件
即如下方式：`/usr/local/bin/node ./test.js`

## 搭建简单脚手架
原理清楚了，下面我们构建自己脚手架：

1. 创建`zuci-test`项目，目录结构如下：
```latex
├── bin
│   └── index.js 
|——package.json
|
```

2. 我们在`package.json`内增加`bin`配置项：
```json
"bin": {
  "zuci": "bin/index.js"
},
```

3. 修改 `index.js`文件如下
```json
#!/usr/bin/env node

console.log('Welcome zuci-test!!!')
```
OK！大功告成。
你只需要把它发布到 `npm`。全局安装后，既可以使用 `zuci`命令了。
这个脚手架命令相当简单，但是我们所用的所有脚手架核心既是如此。
我们可以在此基础上增加：命令解析，命令提示，日志打印，控制台文字着色，网络请求等

## 附加：本地调试
开发脚手架过程中，不可能随时发布进行测试。如果希望本地开发时调试脚手架命令，如何操作呢？
下面我们了解下`npm link`的使用。

`npm link` 可以将`npm`模块链接到对应的运行项目中去，方便地对模块进行调试和测试。

### 进入 项目目录，执行 `npm link`
会根据package.json上的配置，被链接到全局，路径是`{prefix}/lib/node_modules/<package>`
我们可以使用`npm config get prefix`命令获取到prefix的值。
此时，如果`package.json`内配置了`bin`参数，即可以使用对应的命令
使用 `ll {prefix}/lib/node_modules/`可以看到，路径被软连接到当前项目地址：
![image (2).png](https://wepie-1254951306.cos.ap-shanghai.myqcloud.com/2022-11-29/LSpmQnL3ckyTN5xlX82q/image%20%282%29.png)
### `npm unlink`接触链接
如果要解除上述软链接，在项目目录下，可以使用 `npm unlink -g`
此时解除全局的软链接

### 依赖模块 `link`
正常开发过程中，我们会对项目进行分包，如何进行调试？

1. 创建模块项目`zuci-test-lib`,结构如下：
```latex
├── lib
│   └── index.js 
|——package.json
|
```
此时，`package.json`内，`main`配置设置为：`lib/index.js`

2. 执行`link`操作

在`zuci-test-lib`下执行`npm link`，将会把本包在全局添加软链接

3. 回到`zuci-test`目录，链接模块

在`zuci-test`下执行链接操作：`npm link zuci-test-lib`
此时就可以链接模块包，按照正常npm包方式引用和使用

4. 在`zuci-test`目录，使用 `npm unlink zuci-test-lib`可以解除包链接

## 源码地址
[https://github.com/zu1662/zuci-demo](https://github.com/zu1662/zuci-demo)


本文将以一个简单的demo，手把手教你脚手架原理，构建自己的超简单脚手架~~

教你构建自己简单脚手架