前端实战-构建脚手架工具

心血来潮，发现自己每次创建新的项目的时候，总是得下载一个新的全局包，如vue-cli， express诸如之类的，并且有时候自己的一些开发配置也需要不停的去配置。这个时候就会想，要是自己能将所有的空项目和已经配置好的配置文件塞到仓库理，在初始化项目的时候从自己仓库去加载空的项目。

创建NPM账号

如果你想要通过类似于安装全局包的方式构建项目，你得先有一个npm的账号用于发布

npm login # 用于npm的登陆

npm publish # 用于npm 包的发布

构建cli工具

创建一个新的文件夹，使用如下命令初始化项目

npm init  # 初始化项目，会生成一个package.json文件

mkdir src # 创建src 文件夹，存放代码

touch index.js  # 你的入口文件

npm i yargs | yarn add yargs  # 安装yargs包用于项目创建包的命令

什么是yargs

Yargs helps you build interactive command line tools, by parsing arguments and generating an e,elegant user interface.
yargs 文档：https://www.npmjs.com/package/yargs

使用yargs

const yargs = require('yargs')

const args = yargs.command({
    command: 'create <name>',
    desc: 'Create a vue tempate.',
    builder: {},
    handler: (argv) => {
        
})
.version()
.help()
.alias({
    'h': 'help',
    'v': 'version',
})
.strict(true)
.demandCommand()
.argv

如何下载github上面的代码

我们一般下载github上面的代码时候，除了使用git clone + git链接， 还有的就是通过下载压缩包的方式下载。
所以我们可以通过request的方式下载代码压缩包

const request = require('request').defaults({
    headers: {
        'User-Agent': 'node request'
    }
})

const REPOSITORIES_VUE_URL = 'https://github.com/BENcorry/c-template-vue/archive/vue.zip'
const REPOSITORIES_NUXT_URL = 'https://github.com/BENcorry/c-template-vue/archive/nuxt.zip'
request.get(url) // url 就是上面的两个URL变量中的一个
    .on('error', err => {
        Error(`Error downloading: ${err}`)
    })
    .on('response', res => {
        if (res.statusCode !== 200) {
            Error(`Get zip url return not equal 200`)
        }
    })
    .on('end', () => {
        Info('Download finished!')
    })
    .pipe(file)

如何选择不同的url

这里我们需要inquirer包

npm i inquirer | yarn add inquirer  

然后我们开始编辑代码：

function projectInput(name, cb) {
    const input = {
        type: 'input',
        name: 'name',
        message: 'project name',
    }
    if (name) {
        input.default = () => {
            return name
        }
    }
    const questions = [
        input,
        {
            type: 'input',
            name: 'descript',
            message: 'project descript',
            default: () => {
                return 'A vue project'
            }
        },
        {
            type: 'input',
            name: 'version',
            message: 'project version',
            default: () => {
                return '1.0.0'
            }
        },
        {
            type: 'input',
            name: 'author',
            message: 'Author',
            default: () => {
                return 'Author'
            }
        },
        {
            type: 'rawlist',
            name: 'type',
            message: 'create a vue or nuxt cli',
            choices: () => {
                return ['vue', 'nuxt']
            },
            default: () => {
                return 'vue'
            }
        }
    ]
    inquirer.prompt(questions).then(answers => {
        cb(answers)
    })
}

这样我们就可以通过编辑和选择去创建不同的项目和描述，类似于vue在构建新项目的时候。
具体代码链接：https://github.com/BENcorry/corry-font-cli

结语

1. 现在还没实现自动安装npm包
2. 好好学习，天天向上～
3. 已将下载的路径删了，删了，删了