前端脚手架(cli)实现

本文介绍如何实现前端脚手架,参考vue-cli,利用commander.js处理命令,download-git-repo下载项目模板,inquirer.js进行用户交互,handlebars.js填充模板,ora展示下载动画,chalk和log-symbols美化终端输出。
摘要由CSDN通过智能技术生成

背景

 整合前端团队代码规范, 以及统一整体架构

使用库

  • 本文借鉴vue-cli思路,用到的库有:

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

代码实现

  • 下载依赖
npm init -y
npm i commander download-git-repo inquirer handlebars ora chalk log-symbols -S
  • package.json
{
     "name": "lcq-cli",
     "version": "1.0.0",
     "description": "lcq-cli",
     "bin": {
      "lcq": "index.js"
     },
     ...
}
  • index.js
const fs = require('fs');
const program = require('commander');
const download = require('download-git-repo');
const handlebars = require('handlebars');
const inquirer 
  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值