从0到1开发简单脚手架

一时失言乱红尘 2023-03-13 12:22 34阅读 0赞

git地址：[https://github.com/niuyueyang/jiaoshoujia][https_github.com_niuyueyang_jiaoshoujia]

### 什么是脚手架 ###

脚手架用于快速生成新项目的目录模板，并集成一系列体系化工具的安装，能够提升前端开发人员的效率，减少copy操作

目前比较主流的脚手架：

*  Vue脚手架：Vue-cli
 *  React脚手架：create-react-app

### 期望的脚手架 ###

当我要开启一个新项目的开发，可以快速生成新项目的目录模板，而这个目录结构是每个项目统一个模版规范（目录规范），同时也设定了通用的配置包括如下

*  通用的Webpack配置（vue cli 3x 以上是vue.config.js）
 *  统一的Eslint 校验规则：如Airbnb、eslint-plugin-vue等（eslintConfig）
 *  统一的单元测试框架配置：单元测试覆盖率、测试的目录等
 *  统一的Dockerfile和jenkinsfile (用来打包成镜像和部署流水线定义)
 *  统一babel的配置（.babelrc或babel.config.js）
 *  统一的常量配置（缓存字段等等）
 *  不同环境的配置文件（development、test、production）

### 开发脚手架 ###

#### 如何开发 ####

如果是要开发一个高度可定制化的脚手架，需要考虑的因素很多，因为某种限制，选择了一种简易的方式来实现内部的脚手架工具，远离就是通过准备两个模版，一个是pc端的，另一个是mobile端的模版，然后用git管理起来，我需要如下工具：

> 可用于控制台选择的工具：inquirer  
> 可处理控制台命令的工具：commander  
> 可改变输出log颜色的工具：chalk  
> 可执行shell命令的工具: child\_process  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMzMyMTg0_size_16_color_FFFFFF_t_70]  
> inquirer使用规则：[https://blog.csdn.net/qq\_26733915/article/details/80461257][https_blog.csdn.net_qq_26733915_article_details_80461257]

入口文件index.js

#!/usr/bin/env node
    
    const fs = require('fs');
    const path = require('path');
    const chalk = require('chalk');
    const commander = require('commander');
    const inquirer = require('inquirer');
    const checkDire = require('./utils/checkDire.js');
    const {  exec } = require('child_process');
    const {  version } = require('../package.json');
    const {  promptTypeList } = require('./config');
    
    //version 版本号
    commander.version(version, '-v, --version')
      .command('init <projectName>')
      .alias("i")
      .description("输入项目名称，初始化项目模版")
      .action(async (projectName,cmd) => { 
        await checkDire(path.join(process.cwd(),projectName),projectName);   // 检测创建项目文件夹是否存在
        inquirer.prompt(promptTypeList).then(result => { 
          const { url, gitName, val} = result.type;
          console.log("您选择的模版类型信息如下：" + val);
          console.log('项目初始化拷贝获取中...');
          if(!url){ 
            console.log(chalk.red(`${ val} 该类型暂不支持...`));
            process.exit(1);
          }
          exec('git clone ' + url, function (error, stdout, stderr) { 
            if (error !== null) { 
              console.log(chalk.red(
                `clone fail,${ error}`
              ));
              return;
            }
            fs.rename(gitName, projectName, (err)=>{ 
              if (err) { 
                exec('rm -rf '+gitName, function (err, out) { });
                console.log(chalk.red(`The ${ projectName} project template already exist`));
              } else { 
                console.log(chalk.green(`The ${ projectName} project template successfully create(项目模版创建成功)`));
              }
            });
          });
        })
      });
    commander.parse(process.argv);

> **需要注意在文件前面定义\#!/usr/bin/env node**

> **\#!/usr/bin/env node设置后，可以让系统动态的去查找node，已解决不同机器不同用户设置不一致问题**

**检测目录是否存在**

// utils/checkDire.js
    const fs = require('fs');
    const chalk = require('chalk');
    const path = require('path');
    
    module.exports = function (dir,name) { 
      let isExists = fs.existsSync(dir);
      if (isExists) { 
        console.log(chalk.red(
          `The ${ name} project already exists in directory. Please try to use another projectName`
        ));
        process.exit(1);
      }

**配置文件**

// config/index.js
    配置文件
    /* @desc: 使用配置文件 @Author: niuyueyang */
    module.exports  = { 
      promptTypeList:[{ 
          type: 'list',
          message: '请选择拉取的模版类型:',
          name: 'type',
          choices: [{ 
            name: 'pc',
            value: { 
              url: 'https://github.com/littleTreeme/vue-web-template.git',
              gitName: 'vue-web-template',
              val:'PC端模版'
            }
          },{ 
            name: 'mobile',
            value: { 
              url: 'https://github.com/littleTreeme/vue-web-template.git',
              gitName: 'vue-web-template',
              val:'移动端模版'
            }
          }]
      }],
    };

#### 工具详解 ####

**inquirer**

> 一个用户与命令行交互的工具

git地址：[https://github.com/SBoudrias/Inquirer.js][https_github.com_SBoudrias_Inquirer.js]

const inquirer = require('inquirer');
    
    const promptList = [
         type: 'list',
         message: '请选择拉取的模版类型:',
         name: 'type',
          choices: ['mobile','pc']
    ];
    
    inquirer.prompt(promptList).then(type => { 
        console.log(type); // 返回 mobile 或 pc
    })

![在这里插入图片描述][20200514105517538.png]  
**commander**

> commander是一个轻巧的nodejs模块，提供了用户命令行输入和参数解析强大功能

git地址：[https://github.com/tj/commander.js][https_github.com_tj_commander.js]

const commander = require('commander');
    commander.version(version, '-v, --version')
      .command('init <projectName>') 
      .alias("i") 
      .description("输入项目名称，初始化项目模版") 
      .action(async (projectName,cmd) => { 
          console.log(projectName,'你输入的<projectName>')
      })
    commander.parse(process.argv);
      
    // command – 定义命令行指令，后面可跟上一个name，用空格隔开
    // alias – 定义一个更短的命令行指令
    // description – 描述，它会在help里面展示
    // option – 定义参数
    // action – 注册一个callback函数
    // parse - 解析命令行

**chalk**

> node终端样式库,让你的日script  
> 志样式更美观，主要用chalk来区别错误与成功的日志

git地址：[https://github.com/chalk/chalk][https_github.com_chalk_chalk]

const chalk = require('chalk');
    
    // 报错日志用红色来显示
    chalk.red(`The project already exists in directory. Please try to use another projectName`));
    
    // 成功日志用绿色来显示
    chalk.green(`The project template successfully create(项目模版创建成功)`);

### 如何使用 ###

1.  npm install -g nyy-cli
2.  nyy-cli init **<projectName>**
3.  nyy-cli -v （查看版本号）

> 注意：windows必须使用git地址

[https_github.com_niuyueyang_jiaoshoujia]: https://github.com/niuyueyang/jiaoshoujia
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMzMyMTg0_size_16_color_FFFFFF_t_70]: /images/20230312/5ae6bb63e46a4c57b33c8c401be3c3ca.png
[https_blog.csdn.net_qq_26733915_article_details_80461257]: https://blog.csdn.net/qq_26733915/article/details/80461257
[https_github.com_SBoudrias_Inquirer.js]: https://github.com/SBoudrias/Inquirer.js
[20200514105517538.png]: /images/20230312/7c620e20fe2d46e1b0bce93d1aba9d82.png
[https_github.com_tj_commander.js]: https://github.com/tj/commander.js
[https_github.com_chalk_chalk]: https://github.com/chalk/chalk