写一个自己的脚手架/CLI
fuzuxian 11/9/2020 CLI
# 写一个自己的脚手架/CLI
脚手架使用的功能
- 用户输入命令，准备创建项目。
- 脚手架解析用户命令，并弹出交互语句，询问用户创建项目需要哪些功能。
- 用户选择自己需要的功能。
- 脚手架根据用户的选择创建
package.json文件，并添加对应的依赖项。- 脚手架根据用户的选择渲染项目模板，生成文件（例如
index.html、main.js、App.vue等文件）。- 执行
npm install命令安装依赖。
脚手架 ---- 三方依赖库
- commander： 命令行自定义指令
- inquirer：提供问答式的命令行交互方法，可以收集获取命令行的回答的结果，然后进行操作
- chalk：命令行多彩打印
- cross-spawn：跨平台 shell 工具，比如安装依赖
- download-git-repo：下载远程模板
- ora: 命令行 loading 动效
# 初始化搭建
// 新建项目目录 my-node-cli
mkdir my-node-cli
cd my-node-cli
npm init # 生成 package.json 文件
touch cli.js # 新建 cli.js 文件
// 在 package.json 文件中指定入口文件为 cli.js
"name": "my-node-cli",
"version": "1.0.0",
"main": "cli.js",
"bin": "cli.js",
// 在cli.js文件的开头加入
#! /usr/bin/env node
console.log('my-node-cli working~')
// 链接到全局
npm link
// 在命令行中输入 my-node-cli 执行一下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
#！这个符号通常在第一行开头中出现，用于指明这个脚本文件的解释程序。
/usr/bin/env就是告诉系统可以在PATH目录中查找，
配置#!/usr/bin/env node, 就是解决了不同的用户node路径不同的问题，让系统动态的去查找node来执行你的脚本文件。
# 增加基本功能
- 生成对应的文件
安装 ejs 模版引擎将用户输入的数据渲染到模版文件上npm install ejs --save # yarn add ejs --save
处理用户命令
使用 commander 注册了一个 create 命令，并设置了脚手架的版本和描述
#!/usr/bin/env node
const program = require('commander')
const create = require('../lib/create')
program
.version('0.1.0')
.command('create <name>')
.description('create a new project')
.action(name => { create(name) })
program.parse()
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
将这段代码保存在项目下的 bin 目录，并命名为 mvc.js。
在 package.json 添加"bin": { "mvc": "./bin/mvc.js" }，再执行 npm link，将 mvc 注册成全局命令
mvc create demo（实际上是 node ./bin/mvc.js create demo）
# 发布项目
第一步，在 git 上建好仓库 第二步，完善 package.json 中的配置 第三步，使用 npm publish 进行发布，更新到时候，注意修改版本号
参考：