写一个自用的前端脚手架

在工作中我们会用到很多便捷的脚手架工具，比如Vue的vue-cli，React的create-react-app等。极大的提高了我们的工作效率，那么今天我们就来学学怎么制作一款自用的前端脚手架。

核心依赖

1. commander 命令行工具
2. download-git-repo git仓库代码下载
3. chalk 命令行输出样式美化
4. Inquirer.js 命令行交互
5. ora 命令行加载中效果
6. didyoumean 脚本命令匹配
7. fs-extra fs的替代品。
8. log-symbols 日志着色
9. semver 语义化日志控制
10. validate-npm-package-name 校验包名

项目结构

 

 

项目搭建

1. 在一个空文件下执行npm init
2. 将以上依赖全部安装，执行npm install commander … validate-npm-package-name -S

1.初始化

在根目录下新建`bin/luchx.js`文件，并添加以下代码

 

 

首先文件第一行表示该文件运行于node环境，接着引入commander。最后的program.parse方法用于解析命令行中传入的参数。

2.添加第一个指令

command命令有两种用法，官方示例如下：

 

 

其中参数对应的<>, [ ]分别代表必填和选填。这里我们使用第一种，添加如下代码：

 

 

3.添加监听–help事件

 

 

执行结果

 

 

交互说明

1.在根目录下创建lib文件，并添加create.js文件。

 

 

2.校验包名

 

 

3. inquirer.js 处理命令交互

 

 

4. 封装下载文件lib/downloadFromRemote.js

 

 

5. 添加下载操作

 

 

运行

本项目没有发布到npm上，仅作学习研究之用，可以自己拉取项目然后执行npm link，在本地体验。为了可以全局使用，我们需要在package.json里面设置一下，这样就可以执行luchx命令开头的指令了。

"bin": {
 "luchx": "bin/luchx.js"
},

以上完整的代码可以访问[github查看获取](https://github.com/luchx/ECHI_CLI)

参考

• vue-cli Vue.js 开发的标准工具
• commander node.js 命令行接口的完整解决方案
• Inquirer 命令行交互工具

原文https://youyou-tech.com/2019/10/19/%E5%86%99%E4%B8%80%E4%B8%AA%E8%87%AA%E7%94%A8%E7%9A%84%E5%89%8D%E7%AB%AF%E8%84%9A%E6%89%8B%E6%9E%B6/