【转】前端脚手架开发入门

倾城 • • 杂文

前言

我们大部分时间都专注于业务的开发，初始化项目的时候，拿起模板项目直接npm init X就开干。但是，有时候现成的脚手架未必就能满足我们的业务需求，这时就需要我们自己开发一个脚手架，那么我们使用的脚手架里面到底做了什么，如何自己搭建脚手架呢？
本次就给大家简单介绍下脚手架的基本开发。

思考：我们平时用的脚手架模板Taro、create-react-app、rax 的cli都有什么样的特征呢？需要实现什么能力？
先看下Rax 官方提供的npm init rax命令

体验了rax脚手架之后，不难回答：

    1. 脚手架需要实现什么？初始化项目模版能力。
    1. 脚手架需要什么功能？
      1. 问询功能
      2. 下载模版
      3. 写入模版
      4. 优化（git初始化，安装依赖等）

工具介绍

要想实现以上的功能，我们需要一些工具辅助：

    1. commander.js 命令行工具
    1. chalk 命令行输出样式美化
    1. Inquirer.js 命令行交互
    1. ora 加载提示
    1. download-git-repo
    1. ...

下面就一一先介绍下以上工具，初始化空项目，安装依赖

npm install chalk commander download-git-repo inquirer ora --save
commander

commander github地址：https://github.com/tj/commander.js

Commander是完整的node 命令行解决方案, 编写代码来描述命令行界面。Commander 负责将参数解析为选项和命令参数，为问题显示使用错误，并实现一个有帮助的系统。

Commander通过链式调用，有option、argument、action等常用方法，其中：

  1. option方法用来定义选项，同时可以附加选项的简介，每个选项可以定义一个短选项名称（-后面接单个字符）和一个长选项名称（--后面接一个或多个单词），使用逗号、空格或|分隔。

  2. aciton方法添加命令， 第一个参数为命令名称，命令参数可以跟在名称后面，也可以用.argument()单独指定。参数可为必选的（尖括号表示）、可选的（方括号表示）或变长参数（点号表示，如果使用，只能是最后一个参数

     program.command('clone  [destination]')

  3. argument方法 在Command对象上使用.argument()来按次序指定命令参数。该方法接受参数名称和参数描述。参数可为必选的（尖括号表示，例如）或可选的（方括号表示，例如[optional]）

  4. action方法 处理函数的参数：该命令声明的所有参数、解析出的选项、该命令对象自身。

import { Command } from 'commander';

const program = new Command();
program
  .name('test-string-utils')
  .description('CLI to some JavaScript string utilities by 禾汐')
  .version('0.8.0');

program.command('split')
  .description('Split a string into substrings and display as an array')
  .argument('', 'string to split')
  .option('--first', 'display just the first substring')
  .option('-s, --separator ', 'separator character', ',')
  .action((str, options) => {
    console.log('===>',str,options);
    const limit = options.first ? 1 : undefined;
    console.log(str.split(options.separator, limit));
  });

program.parse();

// node ./demo/commander.js
// node ./demo/commander.js split --separator=/ a/b/c
// node ./demo/commander.js split -s / a/b/c
chalk

chalk github地址：https://github.com/chalk/chalk

美化命令行输出的工具

语法很简单：

chalk.