zoukankan html css js c++ java

脚手架搭建

1、简介

正如vue-cli（https://cli.vuejs.org/zh/ ），脚手架的主要作用是：

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

2、开发脚手架采用库

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

3、安装上述依赖

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

or

yarn add commander download-git-repo inquirer handlebars ora chalk log-symbols

4、添加命令行（package.json的bin指令）

以添加“es-study-cli”为例：

{
  "name": "es-study-cli",
  "version": "1.0.0",
  "description": "es-study-cli",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "bin": {
    "es-study-cli": "./bin/main.js"
  },
  "keywords": ["es-study-cli"],
  "author": "mfg",
  "license": "ISC",
  "dependencies": {
    "chalk": "^3.0.0",
    "commander": "^4.1.1",
    "download-git-repo": "^3.0.2",
    "handlebars": "^4.7.3",
    "inquirer": "^7.0.4",
    "loading-indicator": "^2.0.0",
    "log-symbols": "^3.0.0",
    "ora": "^4.0.3",
    "shelljs": "^0.8.3"
  }
}

5、bin文件夹下的main.js示例

 1 #!/usr/bin/env node
 2 const fs = require('fs');
 3 const program = require('commander');
 4 const download = require('download-git-repo');
 5 const handlebars = require('handlebars');
 6 const inquirer = require('inquirer');
 7 // 下载美化使用
 8 const ora = require('ora');
 9 const chalk = require('chalk');
10 const symbols = require('log-symbols');
11 
12 //  -v 和 --version 添加到命令中，可以通过这些选项打印出版本号如1.0.0。
13 program.version('1.0.0', '-v, --version')
14 // 定义 init 命令，name 则是必传的参数，为项目名。
15     .command('init <name>')
16     .action((name) => {
17         if (!fs.existsSync(name)) {
18             inquirer.prompt([
19                 {
20                     name: 'description',
21                     message: '请输入项目描述'
22                 },
23                 {
24                     name: 'author',
25                     message: '请输入作者名称'
26                 }
27             ]).then((answers) => {
28                 const spinner = ora('正在下载模板...');
29                 spinner.start();
30                 // 下载模板
31                 download('https://github.com:MengFangui/iview-table-page#master', name, { clone: true }, (err) => {
32                     if (err) {
33                         spinner.fail();
34                         console.log(symbols.error, chalk.red(err));
35                     } else {
36                         spinner.succeed();
37                         const fileName = `${name}/package.json`;
38                         const meta = {
39                             name,
40                             description: answers.description,
41                             author: answers.author
42                         }
43                         // 编译传进来的用户输入的交互参数
44                         if (fs.existsSync(fileName)) {
45                             const content = fs.readFileSync(fileName).toString();
46                             const result = handlebars.compile(content)(meta);
47                             fs.writeFileSync(fileName, result);
48                         }
49                         console.log(symbols.success, chalk.green('项目初始化完成'));
50                     }
51                 })
52             })
53         } else {
54             // 错误提示项目已存在，避免覆盖原有项目
55             console.log(symbols.error, chalk.red('项目已存在'));
56         }
57     })
58 program.parse(process.argv);