根据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-cli -g
// 按照以前的命令
zjs-cli init myDemo

zjs-cli的git地址 https://github.com/zhou1591/z...
zjs-template的git地址 https://github.com/zhou1591/z...

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