开发一个Parcel-vue脚手架工具(详细步骤)

前言

像我们熟悉的 vue-cli，create-react-app 等脚手架，只需要输入简单的命令 vue init webpack project，即可快速帮我们生成一个初始项目。在实际工作中，我们可以定制一个属于自己的脚手架，来提高自己的工作效率。

为什么需要需要脚手架？

减少重复性的工作，不再需要复制其他项目再删除无关代码，或者从零创建一个项目和文件。
根据交互动态生成项目结构和配置文件等。
多人协作更为方便，不需要把文件传来传去。

思路

要开发脚手架，首先要理清思路，脚手架是如何工作的？我们可以借鉴 vue-cli 的基本思路。vue-cli 是将项目模板放在 git 上，运行的时候再根据用户交互下载不同的模板，经过模板引擎渲染出来，生成项目。这样将模板和脚手架分离，就可以各自维护，即使模板有变动，只需要上传最新的模板即可，而不需要用户去更新脚手架就可以生成最新的项目。那么就可以按照这个思路来进行开发了。

第三方库

首先来看看会用到哪些库。

commander.js，可以自动的解析命令和参数，用于处理用户输入的命令。
download-git-repo，下载并提取 git 仓库，用于下载项目模板。
Inquirer.js，通用的命令行用户界面集合，用于和用户进行交互。
handlebars.js，模板引擎，将用户提交的信息动态填充到文件中。
ora，下载过程久的话，可以用于显示下载中的动画效果。
chalk，可以给终端的字体加上颜色。
log-symbols，可以在终端上显示出 √ 或 × 等的图标。

初始化项目

首先创建一个空项目，然后新建一个 index.js 文件，再执行 npm init 生成一个 package.json 文件。最后安装上面需要用到的依赖。

npm install commander download-git-repo inquirer handlebars ora chalk log-symbols -S

处理命令行

node.js 内置了对命令行操作的支持，在 package.json 中的 bin 字段可以定义命令名和关联的执行文件。所以现在 package.json 中加上 bin 的内容：

{
 "name": "suporka-parcel-vue",
 "version": "1.0.0",
 "description": "a vue cli which use parcel to package object",
 "bin": {
  "suporka-parcel-vue": "index.js"
 },
 ...
}

然后在 index.js 中来定义 init 命令：

#!/usr/bin/env node
const program = require('commander');
program.version('1.0.0', '-v, --version')
  .command('init <name>')
  .action((name) => {
    console.log(name);
  });
program.parse(process.argv);

调用 version(‘1.0.0’, ‘-v, –version’) 会将 -v 和 –version 添加到命令中，可以通过这些选项打印出版本号。