脚手架原理

掌握原理 --> 独立思考 --> 总结反思

脚手架原理

脚手架是什么

 vue create app --force

主命令	command	params	options
vue	create	app	--force

node 脚手架创建别名

创建软链接

脚手架开发流程

1. 创建npm 项目
2. 创建脚手架入口文件，最上方添加:

#!/usr/bin/env node

3. 配置package.json 设置bin字段
4. 编写代码
5. 发布到npm

使用流程

1. 安装

npm i xxx-cli -g

2. 使用

xxx-cli

脚手架开发难点

1. 分包
2. 命令注册
3. 参数解析

vue <command> [options] <params>

4. Usage帮助文档

• global help 主命令的帮助文档
  • Usage
  • Options
  • Commands

vue 的帮助信息

Usage: vue <command> [options]

Options:
  -V --version
  -h --hlep

• command help
  • Usage
  • Options

vue create 的帮助信息

Usage: create  [options] <params>

Options:
-V --version
-h --hlep

5. 命令行交互
6. 日志打印
7. 网络请求
8. 文件处理

调试脚手架

1. npm link

/Users/chengpeng/.nvm/versions/node/v14.17.6/bin/zcc -> /Users/chengpeng/.nvm/versions/node/v14.17.6/lib/node_modules/zcc-cli/bin/index.js
/Users/chengpeng/.nvm/versions/node/v14.17.6/lib/node_modules/zcc-cli -> /Users/chengpeng/个人学习/1.前端学习/VsPM/工程化/zcc

2. 分包

本地包调试时可以通过npm link进行软链接，以此达到引用 npm link

cd your-lib-dir
npm link // link 到全局node_modules下

cd your-cli-dir
npm link your-lib // 从全局链接到your-cli-dir的node_modules下

npm unlink 解除本地连接

cd your-lib-dir
npm unlink  // 从全局node_modules 下删除软链接
cd cd your-cli-dir 
npm unlink your-lib //从your-cli-dir的node_modules下删除软链接