前端脚手架搭建之hzq-cli

零、写在开头

hzq-cli 是我这个项目的名称、npm 包的名称，因为 npm 上面不允许有相同名称的包，所以请将所有的 hzq 换成自己喜欢的名称，取名之前，请在 npm 上搜索下，切记包名不要重复哦

一、背景

因为每次新建项目时，都需要 vue init webpack projectName，然后复制、粘贴一大堆项目基本配置，如：api、tool配置等等，感觉很繁琐、容易遗漏，特别时手机端和电脑端不同项目时，那配置真的很乱。所以打算自己构建一个脚手架，然后通过类似vue-cli一样，使用vue init来自由搭建所需项目

二、起步

1. 首先先在 GitHub 上面，上传所需项目模板，我这里上传了几份：template_base、template_element、template_cli3、template_nuxt、template_ts
2. 在本地新建一个文件夹：hzq-cli，cmd 进入该项目，然后npm init，然后一直enter就行，最后会在当前文件夹里面生成一个package文件
3. 然后安装依赖：npm i -s commander inquirer download-git-repo chalk ora
4. 在当前目录下新建bin文件夹，然后在bin下面新建hzq.js

三、配置 package.json

在package.json里面新增代码：

"bin": {
    "hzq": "./bin/hzq.js",
    "h": "./bin/hzq.js"
},
"hzq、h"是命令行要输入的指令，"./bin/hzq.js"是命令执行时的文件。

完整 package.json 代码：

{
    "name": "hzq-cli",
    "version": "2.0.2",
    "description": "Vue脚手架工具",
    "main": "index.js",
    "bin": {
        "hzq": "./bin/hzq.js",
        "h": "./bin/hzq.js"
    },
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "readmeFilename": "README.md",
    "author": "hzq",
    "license": "ISC",
    "dependencies": {
        "chalk": "^2.4.1",
        "commander": "^2.17.1",
        "download-git-repo": "^1.1.0",
        "inquirer": "^6.2.0",
        "ora": "^3.0.0"
    }
}

注意name字段哦，该字段就是 npm 的包名，所以请改成自己的名称！

四、配置 hzq.js

顶部加一行代码 #! /usr/bin/env node：指定这个文件使用 node 执行，不加不行哦！

1. 引入依赖：

#! /usr/bin/env node

const fs = require('fs');
const program = require('commander'); //解析用户输入的命令
const inquirer = require('inquirer'); //NodeJs交互式命令行工具
const download = require('download-git-repo'); //拉取github上的文件
const chalk = require('chalk'); //改变输出文字的颜色
const ora = require('ora'); //小图标

2. 配置命令

program
    .version('0.0.1')
    .option('i, init', '初始化项目')
    .parse(process.argv);

3. 设置问题

const promptList = [
    {
        type: 'input',
        message: '项目名称: ',
        name: 'name',
        default: 'project'
    },
    {
        type: 'list',
        message: '请选择项目UI框架: ',
        name: 'template',
        choices: [ 'base', 'element', 'cli3', 'nuxt', 'ts'],
        default: 'base'
    }
];

4. 监听 init 命令

if (program.init) {
    console.info('');
    //初始化，执行对应操作...
}

5. 初始化操作

inquirer.prompt(promptList).then(answers => {
    const spinner = ora('正在下载模板').start(); //创建一个loading小图标
    let _download = 'MrHzq/template_' + answers.template;
    download(_download, answers.name, err => {
        //从github下载我们需要的项目，并且命名为我们之前输入的项目名称
        if (!err) {
            spinner.clear();
            console.info('');
            console.info(
                chalk.green(
                    '-----------------------------------------------------'
                )
            );
            console.info('');
            spinner.succeed(['项目创建成功,请继续进行以下操作:']);
            console.info('');
            console.info(chalk.cyan(` -  cd ${answers.name}`));
            console.info(chalk.cyan(` -  npm install`));
            console.info(chalk.cyan(` -  npm run dev`));
            console.info(
                chalk.green(
                    '-----------------------------------------------------'
                )
            );
            fs.readFile(
                `${process.cwd()}/${answers.name}/package.json`,
                (err, data) => {
                    if (err) throw err;
                    let _data = JSON.parse(data.toString());
                    _data.name = answers.name;
                    _data.template = answers.template;
                    let str = JSON.stringify(_data, null, 4);
                    fs.writeFile(
                        `${process.cwd()}/${answers.name}/package.json`,
                        str,
                        err => {
                            if (err) throw err;
                            process.exit();
                        }
                    );
                }
            );
        } else {
            // 可以输出一些项目失败的信息
            spinner.warn(['发生错误了']);
            process.exit();
        }
    });
});

五、发布到 NPM

没有账号的同学去 npm 注册一个账号。

1. npm login 登录账号，然后输入username、password、email，密码是不会显示的哦，不要以为没有输入进去
2. npm publish 发布项目
3. + hzq-cli@2.0.0 表示发布完成
4. npm unpublish hzq-cli@2.0.0 删除已发布的包

六、使用

1. 下载刚刚发布的包：npm i -g hzq-cli
2. 查看全局安装过的包：npm list -g --depth 0
3. 输入h --version或者hzq --version或者h -V，当返回版本号，即表示本地安装成功
4. 然后找个文件夹，cmd 运行h i或者hzq i，就可以创建项目了

具体代码请参考hzq-cli