背景
在工作过程中, 我们常常会从一个项目工程到一个新的项目, 改项目配置信息, 删除不必要的代码.
这样做的效率比较低, 也挺繁琐, 更不易于分享协作.
所以, 我们可以制作一个 cli 工具, 用来快速创建一个新项目的脚手架. 如 vue-cli 就是一个非常好用的 cli 工具.
PS:cli 是一个全局安装的 NPM 包.
目标
制作一个 cli 工具, 步骤如下:
1, 将我们的工程模板放到 GitHub 上.
如果工程模板有很多个, 可以新建一个 Organizations, 统一放置到这里面. 我工程模板有很多个, 会统一放 Organizations 下面.
如果工程模板是放在公司 GitLab 上, 则可以新建一个 Group 来统一管理.
2, 定义控制台命令, 包含其参数.
参数一般有 -v 显示包版本, -h 显示帮助信息, create 作为创建项目的命令参数.
如 vue-cli 的创新项目命令是 vue create [name].
3, 创建一个 NPM 包工程, 实现以上 command 功能.
如今 GitHub 已有很多 cli 工具, 可以 clone 一个作为参考模板.
PS: 我做的 cli 工具将在最下面放出链接.
问题
刚开始要做 cli 工具时, 我头脑里就有几个问题.
1, 怎么快速获取到输入的命令行参数?
我相信已有好的 NPM 包可以完成这功能, 我不想自己再从头做一遍.
2, 怎么做选项选择功能, 文字输入?
由于我的工程模板会有很多个, 就想做个选项功能, 创建工程时可以选择其中一个模板.
3, 怎么优雅地输出日志?
console.log 虽然可以用, 但样式不好看, 需要区分 info,error 日志.
方法
1, 怎么快速获取到输入的命令行参数?
yargs 模块能够解决如何处理命令行参数.
2, 怎么做选项选择功能, 文字输入?
inquirer 模块能够处理命令行交互.
3, 怎么优雅地输出日志?
chalk 模块解决字符串样式问题.
具体实现步骤
1, 获取模板列表
2, 设置模板选项
3, 获取模板的 tag 列表
4, 设置 tag 选项
5, 设置项目信息输入
6, 下载 zip_ball, 并复制到目标位置
7, 修改项目的信息
具体实现代码
- #!/usr/bin/env node
- var yargs = require("yargs");
- var info = require("./info.js");
- var args = yargs
- .command({
- command: "create <name>",
- desc: "Create a bingolink template.",
- builder: {},
- handler: function(argv) {
- var projectName = argv.name;
- //1. 获取模板列表
- info.getTemplates(function(templates){
- //2. 设置选项
- info.showTemplateList(templates, (templateName) => {
- var t = templates.find((template) => {
- return template.name == templateName;
- });
- //3. 获取标签列表
- info.getTags(t.tagsUrl, (tags) => {
- //4. 设置选项
- info.showTagList(tags, (tagName) => {
- var tag = tags.find((tag) => {
- return tag.name == tagName;
- });
- //5. 项目信息输入
- info.showProjectInputView(projectName, (project) => {
- projectName = project.project_name;
- //6. 下载 zip_ball, 并复制到目标位置
- info.downloadZipball(tag.zipUrl, projectName, () => {
- //7. 修改项目的信息
- info.editProjectInfo(project);
- })
- })
- })
- })
- })
- })
- }
- })
- .version() // Use package.JSON's version
- .help()
- .alias({
- "h": "help",
- "v": "version"
- })
- .strict(true)
- .demandCommand()
- .argv;
- View Code
上面是入口 JS 的代码, 虽然有回调地狱, 但还算比较清晰.
其他代码就不贴上, 可以 clone 我的工程下来看.
工程地址: https://github.com/codingforme/bingolink-cli
发布 NPM 包
1,NPM adduser
在发布 NPM 包前, 需要先登录 NPM.
2,NPM publish
在工程的根目录, 执行这命令即可.
附录
1,NPM adduser 可能会出现如下的错误.
出现第一错误时, 有人说要在 Username 前加个~ 号.
我加了, 也确实显示登录成功了, 但还是怎么都发布不上, 一直显示 User Not Found.
所以我重新注册了一个 npmjs 帐号, 然后 NPM logout, 再 NPM adduser 新帐号, 才发布成功!!!
来源: https://www.cnblogs.com/lovesong/p/10847433.html