CLI（Command-line interface）命令行工具。常用的git 、npm、vim、node脚本、shell脚本等都是cli工具，比如我们可以通过 git clone 等命令简单把远程代码复制到本地。可以用来制作命令行脚手架工具vue-cli、create-reate-app、angular-cli、gulp-cli等在本地快速构建开发项目。
帮你减少做重复性工作的工具，比如创建项目、打包构建上传OSS

解决痛点：

• 项目配置繁琐、耗时，重复无意义的工作
• 项目结构不统一、不规范
• 前端项目类型繁多，不同项目不同配置，管理成本高
• 脚手架也可以是一套命令集，不只用来创建项目

node知识

process.argv 接收命令行参数

// 输入 s-cli init create-demo
process.argv
/* ['D:\\Program Files\\nodejs\\node.exe','C:\\Users\\USER\\AppData\\Roaming\\npm\\node_modules\\s-cli\\bin\\cli','init','create-demo'
] */process.argv.slice(2) // [ 'init', 'create-name' ] 不带s-cli时

常用到的几个库

commander命令行界面

用来编写指令和处理命令行参数的（参数解析 --help其实就借助了他）

const program = require("commander");
// 定义指令
program.version('0.0.1').command('init <name>').description('Generate a new project from a template').action(name => {  // 回调函数console.log('init' + name);}).command('create <name>', 'Generate a new project from a template') // 这种写法相当于把文件分离出去，执行 s-cli create demo时，找cli-create.js文件
// 解析命令行参数
program.parse(process.argv);// 测试
s-cli -V 
s-cli init demo

官方文档 使用参考

yargs处理命令行参数

类似commander，还有minimist库，都是处理命令行参数

var argv = require('yargs').argv;
console.log('hello ', argv.name);// 测试
s-cli --name=xiaoming    // hello  xiaoming

inquirer

输入交互库，就是你在创建项目的时候，输入项目名，项目描述等等

const inquirer = require('inquirer');
const promptList = [{type: "checkbox",message: "选择颜色:",name: "color",choices: [{name: "red"},{name: "blur",checked: true // 默认选中},{name: "green"},{name: "yellow"}]
}];
inquirer.prompt(promptList).then(answers => {console.log(answers); // 返回的结果
})// 测试
s-cli

参考

shelljs

-f：强制删除文件;
-i：删除之前先询问用户;
-r：递归处理目录;
-v：显示处理过程;
echo：在控制台输出指定内容
exit(code)：以退出码为code退出当前进程

const shell = require('shelljs')
shell.rm('-rf','out/Release');//强制递归删除out/Release目录
shell.cp('-r','stuff/','out/Release');//将`stuff/`中所有内容拷贝至`out/Release`目录
shell.mv(`./ssr-with-${language}`, `./${option.appName}`) // 把移到文件

使用参考

ora加载工具

显示loading动画

const ora = require('ora')('正在构建');
ora.start();
setTimeout(function(){ora.succeed('构建成功');
}, 1000)

chalk和tracer颜色工具

用来修改控制台输出内容样式的，比如颜色

• chalk

const chalk = require('chalk')
console.log(chalk.green('Project initialization finished!')) // 绿色字
console.log(chalk.red('The project already exists')) // 红色字

• tracer

const log = require("tracer").colorConsole()
log.info("模板已建立");
log.error("请填写正确的项目名称！");

download-git-repo和git-clone下载远程模板

• download-git-repo用来下载远程模板的，支持GitHub、 GitLab 和 Bitbucket等

const { promisify } = require('util')
const downloadWithPromise = promisify(require('download-git-repo'))
downloadWithPromise('github:sayid760/koa-react-ssr#master/example/react-ssr-js', path.resolve(__dirname, '../demo'));

• git-clone拉取git文件

const clone = require("git-clone")
var url = "https://github.com/sayid760/vue3-vite-template.git"
clone(url, process.cwd()+'/demo', null, function(){console.log('拉取完成')
})

扩展：

Github API 接口// RC 配置下载模板的地方，给 github 的 api 使用
https://api.github.com/users/xxx/repos // https://api.github.com/${type}/${registry}/repos
curl -u name:secret https://api.github.com/user/repos
https://api.github.com/users/xxx // xxx的用户信息，包含粉丝数
https://api.github.com/users/xxx/keys  // xxx的 ssh key
https://api.github.com/users/xxx/gpg_keys // xxx的gpg
https://api.github.com/users/xxx/followers?page=2 // xxx的粉丝
https://api.github.com/users/xxx/following?page=2 // xxx关注谁
https://api.github.com/orgs/bitcoin bitcoin项目的信息
https://api.github.com/orgs/bitcoin/repos bitcoin项目的repos
https://api.github.com/repos/bitcoin/bitcoin
https://api.github.com/repos/bitcoin/bitcoin/contributors bitcoin的贡献者

官方文档
Github API 调用
如何将Github API与Node.js服务器连接

Handlebars模板引擎

const Handlebars = require('handlebars')
var template = Handlebars.compile("Handlebars <b>{{doesWhat}}</b>");
console.log(template({ doesWhat: "rocks!" }));  // 进行编译并输出

metalsmith读取所有文件,实现模板渲染

/*
思路：
- 将文件内容提取出来，转换为字符串
- 使用 handlebar 将模板内容字符串替换成用户输入的值
- Metalsmith build 成最终文件
- 删除下载下来的模板文件
*/
// down/index.js
'Handlebars <b>{{doesWhat}}</b>'// main.js
const MetalSmith = require('metalsmith'); 
const Handlebars = require('handlebars')
const rm = require('rimraf').sync
const path = require('path')MetalSmith(path.join(__dirname, './down/index.js')) // 遍历文件夹.metadata({doesWhat: "rocks!"}) //metadata 为用户输入的内容.source(path.join(__dirname, './down')) // 模板文件 path.destination(path.join(__dirname, './new')) // 最终编译好的文件存放位置.use((files, metalsmith, done) => {Object.keys(files).forEach(fileName => {const fileContentsString = files[fileName].contents.toString() //Handlebar compile 前需要转换为字符创files[fileName].contents = Handlebars.compile(fileContentsString)(metalsmith.metadata())})done()})
.build(function(err) { // 打包rm(path.join(__dirname, './down'))  // 删除模板文件if (err) throw err;console.log('Build finished!');
})

log-symbols显示出 √ 或 × 等的图标

const symbol = require('log-symbols')
console.log(symbol.success)  // √
console.log(symbol.error)  // ×

ini 格式转换

// index.js
const fs = require('fs'), { decode, encode } = require('ini')
const config = decode.parse(fs.readFileSync('./config.ini', 'utf-8'))
/*
{'<!DOCTYPE html>': true,'<html lang': '"en">','<head>': true,'<meta charset': '"UTF-8">','<meta name': '"viewport" content="width=device-width, initial-scale=1.0">','<title>Document</title>': true,'</head>': true,'<body>': true,'<p>ddddddddddd</p>': true,'</body>': true,'</html>': true
}
*/// 测试
node index.js

简单的cli

// package.json
"bin": {"m-cli": "./main.js"
}// main.js
#!/usr/bin/env nodeconst clone = require("git-clone")
const program = require("commander")
const shell = require("shelljs")
const log = require("tracer").colorConsole()program.version("0.0.1").description("vue项目基础模板").program.command("create <project_name> [template]").option("-tsx, --typescript", "typescript tsx template").action(function (project, template, cmd) {var ts_tpl = !!cmd.typescript;log.info(`create ${project} ${ts_tpl ? "--tsx" : ""}`);if (project) {var pwd = shell.pwd();var url = "https://github.com/xxx/width-js-template.git";if (ts_tpl)url = "https://github.com/xxx/width-ts-template.git";log.info("正在拉取远端模板，请稍等..");clone(url, pwd + `/${project}`, null, function () {shell.rm("-rf", pwd + `/${project}/.git`);log.info("模板已建立");});} else {log.error("请填写正确的项目名称！");}});program.parse(process.argv);// 输入
npm link
m-cli create vuedemo -tsx

扩展：npm link把s-cli注册到全局，然后链接到工程目录，可以直接去执行（把当前目录放到当前环境变量）

C:\Users\USER\AppData\Roaming\npm\s-cli -> C:\Users\USER\AppData\Roaming\npm\node_modules\s-cli\bin\www
C:\Users\USER\AppData\Roaming\npm\node_modules\s-cli -> C:\cli-template\s-cli

实现类似vue-cli脚手架

思路：

• init：拉取模板 （saycli init）
• dev：启动webpack及热更新 （saycli dev）
• build：打包（saycli build）

// 目录
├── bin
│   └── cli              // 可执行文件
└── src├── cache.js       	 // 拉取模板├── check.js       	 // 创建文件名时判断是否已存在├── clientRender.js  // 处理dev和build的应用├── config.js        // 应用配置环节├── init.js          // init command├── main.js        	 // 入口文件└── utils├── index.js      └── webpack.js        
├── package.json
├── README.md

// 1. 初始化
say-cli npm init -y// 2. 创建bin/cli，输入
#! /usr/bin/env  node  // 告诉当前代码需要使用node环境来执行
require('../src/main.js'); // 一个可执行的文件// src/main.js
console.log('hello')   // 3. package.json添加
"bin": {"saycli": "./bin/cli"  // 执行s-cli这个命令就会帮我执行这个文件
}
// 4. 输入npm link，把命令链接到全局下(解除 npm unlink)
npm link // 5. 测试，会打印hello
saycli

// src/main.js
const yargs = require('yargs')
const {init} = require('./init')
const {processError} = require('./util')/* 配置交互命令：输入不同的命令实现不同的内容saycli init：输入名字，选择vue2或vue3，js或ts，根据不同的选择拉取相应模板saycli dev：读取webpack.config.js的内容当作参数传给webpack，启动一个webpack，使用webpack-dev-server把webpack编译后文件会输出到内存中saycli build：使用webpack来打包 
*/
yargs.command('init [appName]', 'init the program', {}, async (argv) => {const option = {appName: argv.appName || 'app',language: 'javascript',vueVersion: 'vue2'}try {await init(option)} catch (error) {processError(error)}}).command('dev', 'start clientRender', {}, async () => {process.env.NODE_ENV = 'development'const { dev } = require('./clientRender')await dev(yargs.argv)}).command('build', 'start clientBuild', {}, async () => {process.env.NODE_ENV = 'production'const { build } = require('./clientRender')await build()}).demandCommand(1, 'You need at least one command before moving on').option('version', {alias: 'v',default: false}).parse()

// init：判断是否已存在相同文件名，选择应用版本，到github拉取模板
const answers = await inquirer.prompt([{type: 'input',message: '应用名称:',name: 'appName',default: option.appName}, {type: 'list',message: 'vue版本',name: 'vueVersion',default: 'vue2',choices: ['vue2','vue3']},{type: 'list',message: '开发语言',name: 'language',default: 'javascript',choices: ['javascript','typescript'],when: function(answers) { // 当vueVersion为vue2的时候才会提问当前问题return answers.vueVersion == 'vue2'}}])

// dev：使用webpack-dev-server把打包出来的内容输出到内存中，轮询刷新内容
const webpack = require('webpack')
const WebpackDevServer = require('webpack-dev-server')
const clientConfig = require(resolve(cwd, baseDir, './build/webpack.config'))
const compiler = webpack(clientConfig)
let server = new WebpackDevServer(compiler)server.listen(8080)

// build：启动webpack打包
const { promisify } = require('util') 
const webpack = require('webpack') 
const webpackWithPromise = promisify(webpack)
const clientConfig = require(resolve(cwd, baseDir, './build/webpack.config'))
const stats = await webpackWithPromise(clientConfig)

github代码参考

发布npm包

npm addUser   // 没有注册、有登录
npm publish    // 发包、更新
npm unpublish --force  // 卸包

/*	发布一个简单的包，初始化项目mkdir npm-utilcd mkdirnpm inti -y// index.jsmodule.exports = (message)=> message.toUpperCase()
*/// 发布npm
1. 在npm官网注册一个账号，https://www.npmjs.com/signup
2. 进入需要发布的包下
3. npm login  // 命令行中登录账号，需要输入用户名、密码、邮箱
4. npm publish// 使用npm包
npm i npm-util -Dconst uppercaser = require('npm-util');
console.log(uppercaser('hello world!'));

注意：发包前先去官网查看是否已有重复名的包，npm文档、包和模块

使用typescript编写发布包代码

npm i -g typescript
tsc --init // 生成tsconfig.json// tsconfig.json
{"compilerOptions": {"target": "ES6", "module": "commonjs",                     "declaration": true  // 表示将要生成d.ts类型声明文件}
}// 编译ts文件生成成js、d.ts的类型声明文件
tsc  index.ts

在package.json中声明类型文件位置：

// package.json，加入types字段
{"name": "@penggy/mysql","version": "1.0.6","description": "Promise wrapper of mysql","main": "./index.js", "types": "./index.d.ts", // 声明类型文件位置"scripts": {"test": "node test.js"},"files": [ // files 字段指定工程目录下面哪些文件需要发布到npm"index.js","index.d.ts","README.md"],

努力填坑中…

扩展知识

1. npm发布什么版本

npm 包的版本号一般都是 x.y.z 的形式（开发包一般用 x.y.z-a）。其中 x 表示主版本号，通常有重大改变或者达到里程碑才改变；
y 表示次要版本号，或二级版本号，在保证主体功能基本不变的情况下，如果适当增加了新功能可以更新此版本号；
z 表示尾版本号或者补丁号，一些小范围的修修补补就可以更新补丁号。
第一版本通常是 0.0.1 或者 1.0.0，当修改了代码，需要更新版本号重新发布到 npm，不知道的小伙伴肯定会手动修改 package.json 的 version 字段，而高级的玩法是直接使用 npm version <update_type> 命令自动搞定。

版本格式：主版本号.次版本号.修订号（先行版本号及版本编译元数据可以加到它的后面，作为延伸）- 主版本号：当你做了不兼容的 API 修改- 次版本号：当你做了向下兼容的功能性新增- 修订号：当你做了向下兼容的问题修正先行版本：
alpha: 内部版本
beta: 公测版本
rc: 即Release candiate，正式版本的候选版本2. 
// 当前版本 1.0.0
"version": "1.0.0"
// 升级大版本好
npm version major
// 执行后当前结果
"version": "2.0.0"