交互式命令行工具之构建页面

通过编写命令行脚本实现自动化创建文件

const inquirer = require('inquirer')
const chalk = require('chalk')
const changeCase = require('change-case')
const fs = require('fs')
inquirer.registerPrompt('datetime', require('inquirer-datepicker-prompt'))

console.log(chalk `{hex('#06f') Hi, welcome to {underline.bold TCS_H5} H5 activity page generator\r\n}`)

// 设置问题
var questions = [{
    type: 'list',
    name: 'prefix',
    message: '活动分类moudleA/moudleB?',
    choices: ['moudleA', 'moudleB'],
    default: 'moudleA'
  },
  {
    type: 'input',
    name: 'name',
    message: '文件名称(即活动目录名,不可重复)?',
    default: '',
    when(answers) {
      return answers.prefix === 'moudleA'
    },
    validate (value) {
      if (value) {
        const vueFile = `./src/pages/${changeCase.pascalCase(value)}/.vue`
        if (!fs.existsSync(vueFile)) {
          return true
        } else {
          return `"${value}" has been used`
        }
      }
      return 'Please enter the page name'
    }
  },
  {
    type: 'input',
    name: 'activityName',
    message: 'title?',
    default: '',
    when(answers) {
      return answers.prefix === 'moudleA'
    },
  },
  {
    type: 'input',
    name: 'designWidth',
    message: '设计标准宽度?',
    default: '',
    when (answers) {
      return answers.prefix === 'moudleA'
    },
  },
  {
    type: 'list',
    name: 'expireType',
    message: '页面有效时间(超过有效时间后不再打包该页面，节省build时间)',
    choices: ['2 month', 'infinite', 'other'],
    default: '2 month',
  },
  {
    type: 'datetime',
    name: 'customDate',
    message: '请选择页面有效期',
    initial: new Date(Date.now() + TWO_MONTH_TIME),
    format: ['yyyy', '/', 'mm', '/', 'dd'],
    when: function (answers) {
      return answers.expireType === 'other' && answers.prefix === 'h5'
    }
  },
]

inquirer.prompt(questions).then(answers => {
  console.log(chalk `\r\n{hex('#090') 配置完成!}\r\n`)
  const { prefix, name, expireType, ctivityName, esignWidth  = answers
  let expireIn = new Date(Date.now() + TWO_MONTH_TIME)
  if (expireType === 'infinite') {
    expireIn = new Date('2099-12-31')
  } else if (expireType === 'other') {
    expireIn = answers.ustomDate
  }
  
 const pathName = changeCase.paramCase(name)
 const fileName = changeCase.pascalCase(name)
 if (prefix === 'moduleA') {
 	const template = `
    <template lang="pug">
    	.${pathName}
    </template>
    <script>
    export default {
  		name: '${pathName}',
    }
    <style lang="stylus" scoped>
  		@import "./main.styl"
	</style>
    `
    const config = `
    `export default {
  		path: '/${pathName}',
  		component: () => import('./${fileName}'),
  		meta: {
    		expireIn: '${expireIn}',
    		title: '${activityName}',
    		designWidth: '${designWidth}'
  		}
	}`
    
    const outputFolder = `./src/pages/${fileName}`
    const imgFolder = `./src/pages/${fileName}/img/`
    if (!fs.existsSync(outputFolder)) {
      fs.mkdirSync(outputFolder)
      console.log(chalk `{hex('#090') 代码文件目录创建成功!}\t`, outputFolder)
    }
    if (!fs.existsSync(imgFolder)) {
      fs.mkdirSync(imgFolder)
      console.log(chalk `{hex('#090') 图片文件目录创建成功!}\t`, imgFolder)
    }
    fs.writeFileSync(outputFolder + '/config.js', configTemplate)
    console.log(chalk `{hex('#090') 配置文件创建成功!}\t`, outputFolder + '/config.js')
    fs.writeFileSync(outputFolder + `/${fileName}.vue`, vueTemplate)
    console.log(chalk `{hex('#090') 页面文件创建成功!}\t`, outputFolder + `/${fileName}.vue`)
    …………………………………………
 }
})
// 命令 "gen": "node ./xxxx/genetator.js"