从零开始开发自己的脚手架工具cli系列：实现模版代码

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第26天，点击查看活动详情

简单基础模版

• vueTemplate.js vue项目基础模版，包含vue基础的结构即可。

module.exports = function () {
  return `
  <template>
      <div></div>
  </template>
  <script>
  export default {
      data() {
          return {}
      }
      methods: {

      }
  }
  </sctipt>
  <style lang="scss" scoped>
  
  </style>
  `;
};

• reactClass.js react基础项目模版。包含简单生命周期。

module.exports = function (className) {
  return `
import * as React from 'react';

export class ${className} extends React.Component{
  constructor(props){
      super(props);

      this.state = {}
  }

  componentDidMount(){

  }

  render() {
      return (
          <div></div>
      )
  }
}
  `;
};

• 模版代码列表 引入上面生成的模版目录。

const reactClass = require('./reactClass');
const vueTemplate = require('./vueTemplate');

module.exports = [
    { name: 'reactClass', src: reactClass,fileType:'.jsx' },
    { name: 'vueTemplate', src: vueTemplate,fileType:'.vue'  }
];

生成模版

模版文件列表，用于下载命令询问： 命令询问时展示的项目列表list，可供选择。

// 引入模板文件
const templates = require('../bin/templates/index');

// 命令行选择列表
const prompList = [
    {
        type: 'list',
        name: 'template',
        message: '请选择你想要生成的模板？',
        choices: templates,
        default: templates[0]
    }
];

module.exports = {
  templates,
  prompList
};

外层基础命令

templates,prompList 为模版代码模版路径和配置。

• inquirer 配置选择要生成的模版
• 复制生成本地模版文件到项目路径 fs.writeFile 写文件 fs.mkdirSync(folder); 生成文件 fs.existsSync 检查当前文件是否已存在 已存在则删除后重新生成文件；不存在则直接创建

#!/usr/bin/env node  // 声明命令类型

// 'use strict';
const { program } = require('commander');
const inquirer = require('inquirer');
// 处理文件
const fs = require("fs");
const { minify } = require('../lib/minify');
const { upload } = require('../lib/upload');
const { templates,prompList } = require('../utils/constant'); // 导入模版配置
const { init } = require('../lib/init'); // cli初始化命令
const fs = require('fs-extra');
const path = require('path');
const glob = require('glob');
const UglifyJS = require('uglify-es');
const HTMLMinifier = require('html-minifier');
const { templates,prompList } = require('../utils/constant');
// 初始化
program
    .command('init')
    .description('初始化')
    .action(async () => {
        init(false);
    });
// 创建模版
program
    .command('create <filename>')
    .description('创建一个文件')
    .action(async (filename) => {
        const res = await inquirer.prompt(prompList);
        Object.keys(templates).forEach((key) => {
            if (res.template === templates[key].name) {
                console.log(key, templates[key]);
                const target = templates[key];
                fs.writeFile(`./${filename}${target.fileType}`, target.src(filename), function (err) {
                    if (err) {
                        console.log('创建失败：', err);
                    } else {
                        console.log(`创建文件成功！${filename}${target.fileType}`);
                    }
                });
            }
        });
    });
    // 创建文件夹
// 创建文件夹命令行
program
    .command('create-f <folder>')
    .description('创建一个文件夹')
    .action((folder) => {
        console.log('create', folder);
        if (fs.existsSync(folder)) {
            console.log('文件夹已存在');
        } else {
            fs.mkdirSync(folder);
            console.log('文件夹创建成功');
        }
    });
    
// minify
program
    .command('minify')
    .description('压缩')
    .option('-s,--srcfolder <srcfolder>', '待压缩文件夹路径')
    .option('-o,--outfolder <outfolder>', '压缩输出文件夹路径')
    .action((res) => {
        const { srcfolder, outfolder } = res;
        minify(srcfolder, outfolder);
    });


// upload
program
    .command('upload')
    .description('上传文件')
    .action(async () => {
        upload();
    });

// release
program
    .command('release')
    .description('打包文件')
    .option('-s,--srcfolder <srcfolder>', '待打包文件夹路径')
    .option('-o,--outfolder <outfolder>', '打包输出文件夹路径')
    .action(async (res) => {
        const { srcfolder, outfolder } = res;
        release(srcfolder, outfolder);
    });

// 处理命令行输入的参数
program.parse(process.argv);