脚手架开发流程

# 脚手架开发流程

脚手架创建npm项目

执行npm init 生成package.json, 配置bin属性
脚手架开发
- 分包
- 参数解析
入口文件首部必须添加
```
#!/usr/bin/env node
```
1
此为(执行命令时的环境解释，使用node执行本文件)
脚手架调试 npm link
脚手架发布 npm publish
使用自己的脚手架
- 安装 npm i your-cli-name
- 使用 your-cli-name command [options] <params>

# 脚手架开发难点解析

分包

将复杂的系统拆分成若干个模块包，相互引入安装等

命令注册

创建脚手架执行将会使用不同的命令command来执行不同的任务。例如

# 创建项目
vue create 
# 添加一个新的Vue CLI插件到项目；如vue-router
vue add
# 手动调用Vue CLI生成器、添加或修改配置；你想在创建项目之后添加TypeScript支持 vue invoke typescript
vue invoke

1
2
3
4
5
6

参数解析
```
vue command [options] <params>
```
1
command使用命令

[options] 全称：--version、--help

[options] 简写：-v、-h

<params> 带params的options: --path /Users/sam/Desktop/vue-test
命令行交互
日志打印
网络通信
文件处理
等等......

# 分包联调

# 脚手架(分包库)本地联调调试link标准流程

链接本地脚手架

# 脚手架库链接到全局
cd your-cli-dir
npm link

1
2
3

链接本地库文件

# 分包库
cd your-lib-dir
npm link

# 脚手架库
cd your-cli-dir
npm link your-lib

1
2
3
4
5
6
7

取消链接本地库文件

# 分包库
cd your-lib-dir
npm unlink -g

# 脚手架库
cd your-cli-dir
npm unlink your-lib

1
2
3
4
5
6
7

# npm命令基础使用

# 线上安装 #####################
# 项目内安装
npm i
# npm install
# npm i xxx / npm i xxx -D
npm uninstall xxx

# 全局安装
npm i xxx -g
# 移除全局库
npm remove xxx -g

1
2
3
4
5
6
7
8
9
10
11

# 本地安装 #####################
# 将本地库链接到全局(即使用本地文件路径的库，相较于npm i使用npm网站的线上下载)
npm link
# 将本地库移除链接到全局
npm link

# 项目引入本地库调试
npm link xxx 
# 项目解除本地库调试
npm unlink XXX

1
2
3
4
5
6
7
8
9
10