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

  • 2019 年 10 月 6 日
  • 筆記

故事背景

身为一个入门前端七个月的小菜鸡，在我入门前端的第一天就接触到了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属性下的命令

这个文件大概位置如下

clipboard.png

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

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

clipboard.png

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

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

  • clipboard.png

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

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

  • 每次发布的时候需要更改你的版本号

  • 还有一个比较重要的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 ， 喜欢的请点个赞吧~

VirMach 便宜 VPS

QNews

QNews