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


Posted in Javascript onSeptember 22, 2018

前言

像我们熟悉的 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 添加到命令中,可以通过这些选项打印出版本号。

调用 command('init <name>') 定义 init 命令,name 则是必传的参数,为项目名。

action() 则是执行 init 命令会发生的行为,要生成项目的过程就是在这里面执行的,这里暂时只打印出 name。

其实到这里,已经可以执行 init 命令了。我们来测试一下,在同级目录下执行:

node index.js init HelloWorld

可以看到命令行工具也打印出了 HelloWorld,那么很清楚, action((name) => {}) 这里的参数 name,就是我们执行 init 命令时输入的项目名称。

命令已经完成,接下来就要下载模板生成项目结构了。

下载模板

download-git-repo 支持从 Github、Gitlab 和 Bitbucket 下载仓库,各自的具体用法可以参考官方文档。

命令行交互

命令行交互功能可以在用户执行 init 命令后,向用户提出问题,接收用户的输入并作出相应的处理。这里使用 inquirer.js 来实现。

const inquirer = require('inquirer');
inquirer.prompt([
  {
    name: 'description',
    message: 'Input the object description'
  },
  {
    name: 'author',
    message: 'Input the object author'
  }
  ]).then((answers) => {
  console.log(answers.author);
})

通过这里例子可以看出,问题就放在 prompt() 中,问题的类型为 input 就是输入类型,name 就是作为答案对象中的 key,message 就是问题了,用户输入的答案就在 answers 中,使用起来就是这么简单。更多的参数设置可以参考官方文档。

通过命令行交互,获得用户的输入,从而可以把答案渲染到模板中。

渲染模板

这里用 handlebars 的语法对模板中的 package.json 文件做一些修改

{
 "name": "{{name}}",
 "version": "1.0.0",
 "description": "{{description}}",
 "scripts": {
  "test": "echo \"Error: no test specified\" && exit 1"
 },
 "author": "{{author}}",
 "license": "ISC"
}

并在下载模板完成之后将用户输入的答案渲染到 package.json 中

视觉美化

在用户输入答案之后,开始下载模板,这时候使用 ora 来提示用户正在下载中。

const ora = require('ora');
// 开始下载
const spinner = ora('正在下载模板...');
spinner.start();

// 下载失败调用
spinner.fail();

// 下载成功调用
spinner.succeed();

然后通过 chalk 来为打印信息加上样式,比如成功信息为绿色,失败信息为红色,这样子会让用户更加容易分辨,同时也让终端的显示更加的好看。

const chalk = require('chalk');
console.log(chalk.green('项目创建成功'));
console.log(chalk.red('项目创建失败'));

除了给打印信息加上颜色之外,还可以使用 log-symbols 在信息前面加上 √ 或 × 等的图标

const chalk = require('chalk');
const symbols = require('log-symbols');
console.log(symbols.success, chalk.green('项目创建成功'));
console.log(symbols.error, chalk.red('项目创建失败'));

完整示例

// index.js
#!/usr/bin/env node
// 处理用户输入的命令
const program = require('commander');
// 下载模板
const download = require('download-git-repo');
// 问题交互
const inquirer = require('inquirer');
// node 文件模块
const fs = require('fs');
// 填充信息至文件
const handlebars = require('handlebars');
// 动画效果
const ora = require('ora');
// 字体加颜色
const chalk = require('chalk');
// 显示提示图标
const symbols = require('log-symbols');
// 命令行操作
var shell = require("shelljs");

program.version('1.0.1', '-v, --version')
 .command('init <name>')
 .action((name) => {
  if (!fs.existsSync(name)) {
   inquirer.prompt([
    {
     name: 'description',
     message: 'Input the object description'
    },
    {
     name: 'author',
     message: 'Input the object author'
    }
   ]).then((answers) => {
    const spinner = ora('Downloading...');
    spinner.start();
    download('zxpsuper/suporka-parcel-vue', name, (err) => {
     if (err) {
      spinner.fail();
      console.log(symbols.error, chalk.red(err));
     } else {
      spinner.succeed();
      const fileName = `${name}/package.json`;
      const meta = {
       name,
       description: answers.description,
       author: answers.author
      }
      if (fs.existsSync(fileName)) {
       const content = fs.readFileSync(fileName).toString();
       const result = handlebars.compile(content)(meta);
       fs.writeFileSync(fileName, result);
      }
      console.log(symbols.success, chalk.green('The vue object has downloaded successfully!'));
      inquirer.prompt([
       {
        type: 'confirm',
        name: 'ifInstall',
        message: 'Are you want to install dependence now?',
        default: true
       }
      ]).then((answers) => {
       if (answers.ifInstall) {
        inquirer.prompt([
         {
          type: 'list',
          name: 'installWay',
          message: 'Choose the tool to install',
          choices: [
           'npm', 'cnpm'
          ]
         }
        ]).then(ans => {
         if (ans.installWay === 'npm') {
          let spinner = ora('Installing...');
          spinner.start();
          // 命令行操作安装依赖
          shell.exec("cd " + name + " && npm i", function (err, stdout, stderr) {
           if (err) {
            spinner.fail();
            console.log(symbols.error, chalk.red(err));
           }
           else {
            spinner.succeed();
            console.log(symbols.success, chalk.green('The object has installed dependence successfully!'));
           }
          });
         } else {
          let spinner = ora('Installing...');
          spinner.start();
          shell.exec("cd " + name + " && cnpm i", function (err, stdout, stderr) {
           if (err) {
            spinner.fail();
            console.log(symbols.error, chalk.red(err));
           }
           else {
            spinner.succeed();
            console.log(symbols.success, chalk.green('The object has installed dependence successfully!'));
           }
          })
         }
        })
       } else {
        console.log(symbols.success, chalk.green('You should install the dependence by yourself!'));
       }
      })
     }
    })
   })
  } else {
   // 错误提示项目已存在,避免覆盖原有项目
   console.log(symbols.error, chalk.red('The object has exist'));
  }
 });
program.parse(process.argv);

npm publish发布你的项目即可。

本地测试node index init parcel-vue

以上是我写的一个 suporka-parcel-vue 的脚手架源码,suporka-parcel-vue 点击即可查看,欢迎star.希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 对象模型 执行模型
Oct 15 Javascript
js日期时间补零的小例子
Mar 05 Javascript
javascript 按键事件(兼容各浏览器)
Dec 20 Javascript
原生JavaScript实现合并多个数组示例
Sep 21 Javascript
JavaScript中实现map功能代码分享
Jun 11 Javascript
基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层
Jan 18 Javascript
详解用webpack的CommonsChunkPlugin提取公共代码的3种方式
Nov 09 Javascript
ligerUI的ligerDialog关闭刷新的方法
Sep 27 Javascript
在Vuex中Mutations修改状态操作
Jul 24 Javascript
浅谈JavaScript中this的指向问题
Jul 28 Javascript
关于ES6尾调用优化的使用
Sep 11 Javascript
vue缓存之keep-alive的理解和应用详解
Nov 02 Javascript
angular的输入和输出的使用方法
Sep 22 #Javascript
vue构建动态表单的方法示例
Sep 22 #Javascript
小程序实现展开/收起的效果示例
Sep 22 #Javascript
玩转vue的slot内容分发
Sep 22 #Javascript
vue 巧用过渡效果(小结)
Sep 22 #Javascript
vue forEach循环数组拿到自己想要的数据方法
Sep 21 #Javascript
vue2.x集成百度UEditor富文本编辑器的方法
Sep 21 #Javascript
You might like
php 引用(&amp;)详解
2009/11/20 PHP
php小经验:解析preg_match与preg_match_all 函数
2013/06/29 PHP
php实现多城市切换特效
2015/08/09 PHP
深入理解PHP JSON数组与对象
2016/07/19 PHP
JavaScript 事件记录使用说明
2009/10/20 Javascript
利用location.hash实现跨域iframe自适应
2010/05/04 Javascript
动态加载JS文件的三种方法
2013/11/08 Javascript
jQuery实现级联菜单效果(仿淘宝首页菜单动画)
2014/04/10 Javascript
js实现带缓冲效果的仿QQ面板折叠菜单代码
2015/09/06 Javascript
值得分享的Bootstrap Ace模板实现菜单和Tab页效果
2015/12/30 Javascript
JavaScript的Vue.js库入门学习教程
2016/05/23 Javascript
JS判断非空至少输入两个字符的简单实现方法
2017/06/23 Javascript
ReactNative 之FlatList使用及踩坑封装总结
2017/11/29 Javascript
angular1配合gulp和bower的使用教程
2018/01/19 Javascript
js input输入百分号保存数据库失败的解决方法
2018/05/26 Javascript
代码分析vue中如何配置less
2018/09/28 Javascript
JS自定义滚动条效果
2020/03/13 Javascript
python网络编程之TCP通信实例和socketserver框架使用例子
2014/04/25 Python
利用python微信库itchat实现微信自动回复功能
2017/05/18 Python
python pandas实现excel转为html格式的方法
2018/10/23 Python
Django restframework 源码分析之认证详解
2019/02/22 Python
python aiohttp的使用详解
2019/06/20 Python
Django实现web端tailf日志文件功能及实例详解
2019/07/28 Python
TensorFlow 输出checkpoint 中的变量名与变量值方式
2020/02/11 Python
PyQt5结合matplotlib绘图的实现示例
2020/09/15 Python
Pycharm安装第三方库失败解决方案
2020/11/17 Python
C/C++程序员常见面试题一
2012/12/08 面试题
一个J2EE项目团队的主要人员组成是什么
2012/06/04 面试题
高三励志标语
2014/06/05 职场文书
助学贷款贫困证明
2014/09/23 职场文书
开展党的群众路线教育实践活动工作总结
2014/11/05 职场文书
父亲婚礼答谢词
2015/01/04 职场文书
求职自荐信怎么写
2015/03/04 职场文书
MySQL 8.0 Online DDL快速加列的相关总结
2021/06/02 MySQL
anaconda python3.8安装后降级
2021/06/11 Python
MySQL使用IF语句及用case语句对条件并结果进行判断 
2022/09/23 MySQL