脚手架必备技能

前言

一说起脚手架,你肯定会想到vue-cli。有些人看到vue-cli那个酷炫的功能和交互就会打退堂鼓。如果我告诉你,我们只需要具备nodejs基础就能写出vue-cli那样的功能来,你是不是稍微会兴奋点呢?接下来跟着我的步伐一点一点揭开脚手架的面纱吧。

准备工作

首先我们的电脑需要有nodejs开发环境,下载安装请点击这里(已有环境请省略):nodejs;
cmd输入node -v,出现下图版本号即安装成功。

image

开发步骤

初始化项目

npm init初始化一个项目;初始化成功之后会根据输入的配置生成一个package.json文件:

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

添加脚手架命令和命令入口文件(test)

脚手架命令:在package.json中添加bin配置来指定自己定义的命令对应的可执行文件的位置,代码如下:

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

命令入口文件:根据package.json中的bin配置,我们在项目根目录下新增bin文件夹,并且在该文件夹下新建·test.js,代码如下:

#!/usr/bin/env node
console.log('test')

第一行是必须添加的,是指定这里用node解析这个脚本。默认找/usr/bin目录下,如果找不到去系统环境变量查找。

这时我们cmd输入test命令,你会发现报错了:

image

为什么找不到test命令呢?让我们先来理解下为啥我们安装了vue-cli之后,输入vue就不报错呢?带着疑问打开我们npm全局安装的文件目录:
image

请留意上图红色的地方,我们会发现我们熟悉的老朋友也在里头:cnpm,vue。这里我们先留下悬念,先回到刚才的脚手架项目。

link到全局:项目根目录下执行如下命令npm link,执行成功之后我们再查看我们全局npm的目录,这个时候我们会发现,多了几个项,细心地你肯定会发现,多出来的文件命名就是我们在package.json中配置的bin键:

image

这个时候我们再次打开cmd输入test试下:

image

对比上面失败的效果,你会发现这次系统识别了test命令,而且控制台输出了test。到这里上面的疑问应该都解开了:执行npm link,将当前的代码在npm全局目录下留个快捷方式,npm检测到package.json里面存在一个bin字段,它就同时在全局npm包目录下生成了一个可执行文件:

  1. npm link,链接到全局
  2. bin配合npm link,生成命令文件
  3. "test": "bin/test.js"cmd执行test,根据配置会去执行bin/test.js这个文件

添加命令

别人脚手架有的功能,我们也得有,例如:-V(--version) -H(--help)等。

commander

首先我们先安装下需要的commander库,然后为我们的test命令添加最基础的版本号查看命令:

#!/usr/bin/env node
const program = require('commander')
program
    .version(`version is ${require('../package.json').version}`)
    .parse(process.argv)

这里需要注意的是末尾的.parse(process.argv)的代码不能丢,如果没有则解析不了我们输入的参数,效果如下:

image

此外还可以添加.description .usage .option .action .command等;下面我们来重点说下.command和.action方法:其中,command允许我们注册一个命令(类似于vue create),代码如下:

program
    .version(`Version is ${require('../package.json').version}`)
    .description('A simple CLI for building initialize project include Wechat applet, Vue, Egg (nodejs)')
    .usage(' [options]')
    .command('create')
    .option("-l --list", "project list", listOption)
    .action((name, cmd) => {
        console.log(111)
        require('../lib/create')
    })
    .parse(process.argv)

终端输入test create查看效果:

image

我们注册的create命令,配合action方法打印出来111,其中我们可以在action中执行别的js文件,模块化开发我们的create命令,如下代码输入text create将会去执行lib/create.js

.action((name, cmd) => {
        require('../lib/create')
    })
image

参数解析:

const program = require('commander')
const inquirer = require('inquirer')
program.usage('').parse(process.argv)
console.log(program.args)

控制台输入test create saa dfasas:

image

更多使用参考:commander

chalk

chalk包的作用是修改控制台中字符串的样式:例如字体样式,字体颜色,背景颜色等。


image

更多使用参考:chalk

log-symbols

为各种日志级别提供着色的符号(类似下载成功的√)


image

更多使用参考:log-symbols

ora

显示下载中,可以设置样式等;有start,fail,succeed方法等。


image

inquirer命令交互

这个库是我们可以和用户交互的工具;我们定义了两个问题:项目名称和版本号,create.js中写入以下代码:

const inquirer = require('inquirer')
getInquirer().then((res) => {
    console.log(res)
})
function getInquirer() {
    return inquirer.prompt([
        {
            name: 'projectName',
            message: 'project name',
            default: 'project',
        },
        {
            name: 'projectVersion',
            message: '项目版本号',
            default: '1.0.0',
        },
    ])
}

终端执行test create,上面的代码打印了执行后的拿到的参数如下图所示:

image

download-git-repo

该模块用于下载git上的模板项目,类似于vue-cli初始化一样,也是在git上下载一份代码回来本地完成开发环境搭建。下面代码封装了下载的代码,作用是根据传入的git地址克隆目标地址的代码到本地:

const ora = require('ora');
const chalk = require("chalk");
const logSymbols = require('log-symbols');
const download = require('download-git-repo');
const {
    spawnSync
} = require("child_process");

module.exports = function (target, downLoadURL) {
    let {
        error
    } = spawnSync("git", ["--version"]);
    if (error) {
        let downurl = downLoadURL.replace("direct:", "");
        console.log(logSymbols.warning, chalk.yellow("未添加Git环境变量引起,添加Git与git管理库的环境变量即可;"))
        console.log(logSymbols.info, chalk.green('或直接到模板地址下载:', downurl));
        return Promise.reject(error);
    }

    return new Promise((resolve, reject) => {
        const spinner = ora(`正在下载模板`)
        spinner.start();
        console.log(downLoadURL)
        download(downLoadURL, target, {
            clone: true
        }, (err) => {
            if (err) {
                let errStr = err.toString()
                spinner.fail();
                reject(err);

                if (errStr.includes("status 128")) {
                    console.log('\n', logSymbols.warning, chalk.yellow("Git默认开启了SSL验证,执行下面命令关闭后再重试即可;"))
                    console.log(logSymbols.info, chalk.green("git config --global http.sslVerify false"))
                }
            } else {
                spinner.succeed();
                resolve(target);
            }
        })
    })
}

下载模板时校验输入的文件目录名:

function checkProjectName(projectName) {
    let next = null;
    if (list.length) {
        if (
            list.filter((name) => {
                const fileName = path.resolve(process.cwd(), path.join(".", name));
                const isDir = fs.statSync(fileName).isDirectory();
                return name.indexOf(projectName) !== -1 && isDir;
            }).length !== 0
        ) {
            console.error(logSymbols.error, chalk.red(`项目${projectName}已经存在`));
            return Promise.resolve(false);
        }
        next = Promise.resolve(projectName);
    } else if (rootName === projectName) {
        next = inquirer
            .prompt([{
                name: "buildInCurrent",
                message: "当前目录为空,且目录名称和项目名称相同,是否直接在当前目录下创建新项目?",
                type: "confirm",
                default: true,
            }, ])
            .then((answer) => {
                return Promise.resolve(answer.buildInCurrent ? "." : projectName);
            });
    } else {
        next = Promise.resolve(projectName);
    }

    return next;
}

child_process

这是nodejs自带的一个包,用于开启子线程,非常强大,详情可以参考这里;这里利用spawnSync方法校验本地是否有git环境:

const { spawnSync } = require("child_process");
let { error } = spawnSync("git", ["--version"]);

到这里你已经掌握开发一个脚手架的必备技能了,行动起来吧!
(如何本文对你有启发的话,请给个赞吧,撸字造图不易)

你可能感兴趣的:(脚手架必备技能)