根据vue-cli手摸手实现一个自己的脚手架

故事背景

身为一个入门前端七个月的小菜鸡，在我入门前端的第一天就接触到了vue，并且死皮赖脸的跟他打了这么久的交到，还记得第一次用vue init webpack 这句命令一下生成一个模板的时候那种心情，当时我就想，要是自己也能写一个的话，那会是灰常吃鸡的吧 o(￣▽￣)ブ,所以说今天我们也要简单实现一个自己的脚手架

认识bin

bin的作用

首先我们先来了解一下这个bin ，这个bin和我们最开始用的vue init webpack 这个命令是息息相关的

还记得我们在最开始安装vue-cli的时候嘛

    npm install vue-cli -g

这条命令的意思是把vue-cli 安装到全局，以至于你再任何一个地方打开cmd 的时候都能够使用 vue init webpack

vue init webpack 这条命令实际上是执行的vue-cli 里边 package.json 里边的bin属性下的命令

这个文件大概位置如下

这个路径里边有隐藏的路径，在查找的时候记得打开隐藏目录可见

这个bin里边大概长成这个样子

由图中可见，这里边有三个命令

    vue vue-init  vue-list

这个三个命令的意思是执行对应的文件，Npm会在node_modules/.bin/目录下建立符号链接。又因为node_modules/.bin/目录会在运行时加入系统的PATH变量，因此在运行npm时，就可以不带路径，直接通过命令来调用这些文件。

bin所执行的文件和参数

那么说到这里你肯定会好奇这个文件是怎么做到生成模板的对吧，那么我们就来看一下被执行的这个文件到底是何方神圣

    #!/usr/bin/env node

    const program = require('commander')

    program

      .version(require('../package').version)

      .usage('<command> [options]')

      .command('init', 'generate a new project from a template')

      .command('list', 'list available official templates')

      .command('build', 'prototype a new project')

      .command('create', '(for v3 warning only)')

    program.parse(process.argv)

上边这一坨代码就是执行vue init webpack 的文件所有内容

首先最重要的一点就是第一句 #!/usr/bin/env node

这句代码不可以没有， #! 指明这个脚本文件的解释程序，然后这个/usr/bin/env 是说在系统的PATH目录中查找

这句话整体的意思就是说会有一个新的shell执行指定的脚本，执行这个脚本的解释程序是node

如果不加这句代码的话是会报错的

然后下边这个引入了一个commander 包这是一个很牛逼的大佬写的一个关于命令行一些操作的包，command 里边的是定义一些子命令，然后后边在跟的参数，这里暂且不深扒了，附上中文文档

commander中文文档

写一个自定义命令

好，那么我们现在了解了bin的基本概念和大致流程，下面我们来写一个自己的命令

首先新建一个文件夹，在package.json里边加上这么一句代码

 "bin": {

    "zjs-cli": "main.js"

  },

和新建一个main.js的文件

然后莫慌，我们还需要再执行一个命令就是

npm link

我们之前全局安装的都会默认在npm的node_modules目录下，这个命令可以简单的理解为在npm的node_modules创建了一个快捷方式

到此为止我们得自定义命令算是走通了，接下来我们说一说文件里边得内容

搭建脚手架

脚手架得工作流程

上边我们知道了bin得作用并且，把我们得自定义命令和文件关联了起来，那么脚手架具体是怎么操作的呢，大概步骤如下

进入文件，根据指定的地址和编译器，执行我们的js
从命令行接受参数，执行对应的操作
交互性的询问问题，根据配置选择拉取的模板
从git拉取模板

我们之前用的vue的脚手架大概的流程就是这样的

安装依赖

在进入文件之后，为了能够得到命令行的操作我们就要安装一些依赖了比如说commander的这个包

    npm install commander

然后命令行默认的字体颜色是黑白色的，我们可以引入一些命令行交互的包，不得不说这些写包的大佬是真牛逼，啥都能写

    npm install chalk

vue 有一个 init 子命令，那我们也叫init好了

    const cmd = require("commander");

    const chalk = require('chalk')

    cmd.command('init').description('初始化模板').action(async (args) => {

        // 。。。

    })

    cmd.parse(process.argv)

其中command 是添加子命令的
description是描述
action 是执行这个命令的回调
parse 是解析你命令行里边传进来的参数比如你写了一个 zjs-cli init demo ，那么这个时候回调里边的args的值就是demo这个字符串

然后需要注意process上的是argv ，里边用的是args ，这里不是笔误，当时我刚开始玩的时候纳闷了好半天

然后做一些交互，让我们得脚手架看起来更顺溜一些

npm install inquirer

npm install ora

上边这两个分别是加载动画和回答问题得，比如vue在新建模板得时候问你的一些列问题，还有那个下载中等待得loading动画

不要问我怎么能记住这么多得包名字，因为我是看的vue-cli源码认识得。。。。

拉取git

这里单独把拉取git拿出来说，虽所内容不多，但毕竟也是今天的主角 o(￣▽￣)ブ

那么问题来了，怎么下载模板呢？很简单，当然还是npm包。。。。

npm install download-git-repo

这个包是可以从github上边下载包的

比如说我之前写的一个demo他叫zjs-template，那么拉取的路径就是我得git路径加项目名称

let url = 'zhou1591/zjs-template'

// 然后第二个参数是拉取下来后的名称

// 这里我选择用命令行里边传过来的参数做名字

let  name = 'args'

然后根据api拉取模板，关闭

let downGit = (name) => {

downLoad(url, name, {

        clone

    }, err => {

        process.exit(1)

    })

}

完整代码如下

// git包

const downLoad = require('download-git-repo')

// 动画

const ora = require('ora')

let url = 'zhou1591/zjs-template'

let clone = false

let downGit = (name) => {

    const spinner = ora('正在拉取模板...')

    spinner.start()

    downLoad(url, name, {

        clone

    }, err => {

        spinner.stop()

        console.log(err?err:"项目创建成功")

        process.exit(1)

    })

}

module.exports = downGit

引到main.js里边跑起来就好了，到此为止一个简单的脚手架已经ok了，就差了最后一步

发布脚手架

创建npm账号并发布

我们写完了一个自己的脚手架之后，当然是想迫不及待的体验一番的

首先我们创建一个npm的账号npm官网

之后在我们刚才的项目里边

npm login 输入你的账号密码邮箱
然后登陆成功后 npm publish 推送
package.json 里边的name 是你的npm包发布的名称
keywords 是搜索你的包的关键字
description是你的包描述
version 是你的版本号

第一次发布npm包可能会遇到的问题

这个是说已经有重复名字的包了你没有权限去推

you must verify your email before publishing a new package: https://www.npmjs.com/email-edit : "your module name"

这个是说第一次发布的时候说你需要验证邮箱，在你登陆的最上方

每次发布的时候需要更改你的版本号
还有一个比较重要的npm ERR! no_perms Private mode enable, only admin can publish this module:

这个是说你没有在npm最开始的源上边，你可能切换比如淘宝等等其他的源，当时我就是因为用了公司的源，怎么登陆都登陆不上去，很蛋疼

完美撒花

好了，到这里我们的第一个脚手架就算是完事了，运行一下

// 全局安装一下

npm install zjs-template -g

// 按照之前的命令

zjs-cli init myDemo

我得zjs-cli的git地址 https://github.com/zhou1591/zjs-cli/

我得zjs-template的git地址 https://github.com/zhou1591/zjs-template

希望我们每一个前端都喜欢前端，都能够在学习中不断充实自己 o(￣▽￣)ブ

下一篇我会简单实现一个vuex ，喜欢的请点个赞吧~