打造自己的npm脚手架工具命令行交互功能可以在用户执行 init 命令后，想用户提出问题，接收用户的输入并做出相应的处理

初始化项目

npm init

新建 index.js 并写入一下内容：

#!/usr/bin/env node

console.log('jm-cli脚手架工具')

配置 package.json 中的 bin 字段

{
  "name": "jm-cli",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "bin": {
    "jm": "index.js"
  }
}

执行 npm link 链接命令到全局（npm unlink 移除全局命令）

执行 bin 中配置的命令测试

例如这里:

jm

输出如下：

jm-cli脚手架工具

命令行工具参数设计

jm --help 查看使用帮助
jm -V | --version 查看工具的版本号
jm list 列出所有可用模板
jm init <template-name> <project-name> 基于指定的模板进行项目初始化

使用 commander 模块处理命令行

安装 commander：

npm install commander

引入commander

#!/usr/bin/env node
const program = require('commander')

program.version('1.0.0', '-v, --version')

调用 version('1.0.0', '-v, --version') 会将 -v 和 -version 添加到命令行中，可以通过这些选项打印出版本号
调用 command(init) 定义 init 命令，name 则是必传的参数，为项目名
action() 则是执行 init 命令会发生的行为，要生成项目的过程就是在这里面执行的，这里暂时只打印出name

输入一下命令进行测试：

jm --help
jm -V

下载模板

安装：

npm install download-git-repo

修改 index.js 代码

const program = require('commander')
const download = require('download-git-repo')

program
  .command('init <template> <project>')
  .description('初始化项目模板')
  .action(function (templateNane, projectNane) {
    // 根据模板名下载对应的模板到本地并起名projectName
    download('httop://xxxxxx:9999:html5/h5template#master', name, {clone: true}, (err) => {
      console.log(err ? 'Error' : 'Success')
    })
  });

download() 第一个参数就是仓库地址

○ 端口号后面的 '/' 在参数中要写成 ':'

○ #master 代表的就是分支名

□ 不同的模板可以放在不同的分支中，更改分支便可以实现下载不同的模板文件了
第二个参数是路径

○上面我们直接在当前路径下创建一个 name 的文件夹存放模板，也可以使用二级目录比如 test/${name}

命令行交互

安装inquirer:

npm install inquirer

命令行交互功能可以在用户执行 init 命令后，想用户提出问题，接收用户的输入并做出相应的处理。这里使用 inquirer.js 来实现

const inquirer = require('inquirer')

inquirer.prompt([{
	type: 'input',
	name: 'author',
	message: '请输入作者名称'
}]).then((answers)=>{
	console.log(answers.author)
})

问题就放在 prompt() 中
问题的类型为 input 就是输入类型
name 就是作为答案对象中的 key
message 就是问题了

渲染模板

在模板中准备 package.json 文件：

{
  "name": "{{ name }}",
  "version": "1.0.0",
  "description": "{{ description }}",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "{{ author }}",
  "license": "ISC"
}

并在下载模板完成之后将用户输入的答案渲染到 package.json 中

const program = require('commander')
const download = require('download-git-repo')
const handlebars = require('handlebars') // 模板引擎处理字符串
const inquirer = require('inquirer')
const fs = require('fs')

这里使用了 node.js 的文件模块 fs ，蒋 handlebars 渲染完成后的模板重新写入到文件中。

视觉美化

在用户输入答案后，开始下载模板，这时候使用 ora 来提示用户正在下载中。

安装ora：

npm install ora

const ora = require('ora')
// 开始下载啊
const spinner = ora('正在下载模板...')
spinner.start()

// 下载失败调用
spinner.fail()

// 下载成功调用
spinner.succeed()

然后通过 chalk 来为打印信息加上样式，比如成功信息为绿色，失败信息为红色，这样子会让用户更加容易分辨，同时也让终端的显示更加的好看。

npm 发包

npm install --global jm-cli

打开 npmjs.com 官网
注册 npm 账号
在 npm 检索是否有重名的包名
蒋 package.json 中的 name 修改为发布到 npm 上的包名

提示：和本地项目名称无关
打开控制台，执行 npm login, 在控制台登录 npm
登录成功以后，在项目下执行 npm publish 发布

目录结构

.
├── doc                               项目相关文档
├── public                            public中的静态资源会被复制到输出目录（dist）中
│    ├── config                       全局配置文件（打包后可修改）
│    │   ├── config.js                全局baseURL
│    ├── html                         入口页面
├── src                               源码目录
│    ├── api                          后端接口api
│    ├── assets                       存放项目中需要用到的资源文件，css、js、images等
│    ├── components                   vue公共组件
│    ├── config                       基础路径配置
│    ├── libs                         工具函数
│    ├── router                       路由配置
│    ├── store                        vuex的状态管理
│    ├── themes                       自定义主题（iview、vux等第三方库自定义主题）
│    ├── views                        项目所有页面
│    ├── App.vue                      页面入口文件
│    ├── main.js                      程序入口文件，加载各种公共组件
├── ui                                设计图
├── .babel.config.js                  ES6语法编译配置
├── .editorconfig                     定义代码格式
├── .eslintrc.js                      代码规范配置文件
├── .gitignore                        git上传需要忽略的文件格式
├── README.md                         项目说明
├── package.json                      项目基本信息
├── vue.config.js                     项目构建配置文件
.

打造自己的npm脚手架工具