根据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属性下的命令

这个文件大概位置如下

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

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

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

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

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

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包可能会遇到的问题

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

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

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

  • 每次发布的时候需要更改你的版本号
  • 还有一个比较重要的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/z...
我得zjs-template的git地址 https://github.com/zhou1591/z...

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

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

相关推荐