持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第10天,点击查看活动详情
hi 大家好
这篇文章从0简单实现一个脚手架
首先我们来分享下脚手架开发的难点解析
脚手架开发难点解析
- 分包:将复杂的系统拆分成若干个模块
- 命令注册:
vue create
vue add
...
3.参数解析
vue command [options] <params>
options全称:--version --help
options的缩写: -v -h
带params的options: --path
帮助文档:
global help
Usage
Options
Commands
\
command help
Usage
Options
还有其他:
命令行交互
日志打印
命令行文字变色
网络通信
文件处理
。。。
动手写一个简单的脚手架
- 创建 文件夹 & 初始化 npm 项目
mkdir cli-test
cd cli-test
npm init -y
- 在 根目录 创建 bin/index.js,并在inde.js中 指明 node 环境
#!/usr/bin/env node
console.log('cli test')
- 在package.json中 指定 脚手架名称 和入口文件
"bin": {
"cli-test": "bin/index.js"
},
- 登录 npm 并发布
- 在终端安装并使用 脚手架
本地调试方法
- npm link。就是创建软连接
2.在脚手架 上级目录,全局安装后,进行调试。
多个包如何调试?
1.创建两个包,分别是 cli-test 和 cli-test-lib
2.在cli-test-lib,执行npm link
3.进入 cli-test,执行 npm link cli-test-lib 此时就可以在cli-test中使用cli-test-lib了。
4.在 cli-test-lib 中 lib/index.js写个方法
module.exports = {
sum(a,b){
return a+b;
}
}
5.在cli-test中引入 cli-test-lib方法
#!/usr/bin/env node
const lib = require('cli-test-lib');
console.log(lib.sum(1,2))
console.log('cli test')
6.在终端直接执行 cli-test。可以看到执行效果。