vue-cli脚手架原理以及制作方式（一）

关键技术

• 两个包和一个npm命令

commander 包用来解析命令行参数

download-git-repo 包 用来从github上面拉取模板地址

npm link 该命令主要用于开发过程中将包加入全局变量使用

制作流程

• 使用npm init初始化一个 package.json 文件

• 新建一个 bin目录，并新建一个b2c文件(文件名称可以自行取名)，不带后缀名，在package.json文件中加入一个bin对象

• 打开b2c文件，在头部增加如下语句,为了兼容不同系统下的环境变量

#! /usr/bin/env node
复制代码

• 这时，我们引入一个 commander 包用来解析用户输入的参数,执行如下命令

//命令行中执行如下命令
$ npm install commander -S
复制代码

b2c文件中写如下代码

#! /usr/bin/env node

require('commander')
    .version(require('../package').version)
    .usage('<command> [options]')
    .command('init', '初始化模板项目')
    .parse(process.argv)
复制代码

在bin目录下新建一个b2c-init文件，注意不带后缀名的，这时项目目录结构如下

 |__ bin
    |__ b2c
    |__ b2c-init
 |__ package.json
 |__ README.MD
复制代码

commander包的详细用法参见npm官方仓库：commander.js文档

• 在根目录下使用 npm link 将脚手架命令挂载到全局

注意：这里要保证文件夹名称和package.json中的name值一样

• 在b2c-init文件中写console.log(1)，然后在其他任意目录执行如下命令,如果能正常打印出1，基本上就成功了，后面只需要熟悉一下commander这个包如何解析命令行参数即可

 $ b2c init 
复制代码

总结

本文主要讲解了开发脚手架的第一步，基本上看完这篇文章，就能够入门了，后面的东西都可以自学，比如像使用download-git-repo包来从github上面拉取模板等等这些都十分容易

推荐一个初始化模板的npm包

ths-clis

转载于:https://juejin.im/post/5b090e9ef265da0dd64876d2