vue-cli3 项目优化之通过 node 自动生成组件模板

// index.js
const chalk = require('chalk')
const path = require('path')
const fs = require('fs')
const resolve = (...file) => path.resolve(__dirname, ...file)
const log = message => console.log(chalk.green(`${message}`))
const suessLog = message => console.log(chalk.blue(`${message}`))
const errorLog = error => console.log(chalk.red(`${error}`))
// 导入模板
const {
  vueTemplate,
  entryTemplate
} = require('./template')
// 生成文件
const generateFile = (path, data) => {
  if (fs.existsSync(path)) {
    errorLog(`${path}文件已存在`)
    return
  }
  return new Promise((resolve, reject) => {
    fs.writeFile(path, data, 'utf8', err => {
      if (err) {
        errorLog(err.message)
        reject(err)
      } else {
        resolve(true)
      }
    })
  })
}
log('请输入要生成的页面组件名称、会生成在 views/目录下')
let ponentName = ''
process.stdin.on('data', async chunk => {
  // 组件名称
  const inputName = String(chunk).trim().toString()
  // Vue页面组件路径
  const ponentPath = resolve('../../src/views', inputName)
  // vue文件
  const vueFile = resolve(ponentPath, 'main.vue')
  // 入口文件
  const entryFile = resolve(ponentPath, 'entry.js')
  // 判断组件文件夹是否存在
  const hasComponentExists = fs.existsSync(ponentPath)
  if (hasComponentExists) {
    errorLog(`${inputName}页面组件已存在，请重新输入`)
    return
  } else {
    log(`正在生成 ponent 目录 ${ponentPath}`)
    await dotExistDirectoryCreate(ponentPath)
  }
  try {
    // 获取组件名
    if (inputName.includes('/')) {
      const inputArr = inputName.split('/')
      ponentName = inputArr[inputArr.length - 1]
    } else {
      ponentName = inputName
    }
    log(`正在生成 vue 文件 ${vueFile}`)
    await generateFile(vueFile, vueTemplate(ponentName))
    log(`正在生成 entry 文件 ${entryFile}`)
    await generateFile(entryFile, entryTemplate(ponentName))
    suessLog('生成成功')
  } catch (e) {
    errorLog(e.message)
  }
  process.stdin.emit('end')
})
process.stdin.on('end', () => {
  log('exit')
  process.exit()
})
function dotExistDirectoryCreate(directory) {
  return new Promise((resolve) => {
    mkdirs(directory, function() {
      resolve(true)
    })
  })
}
// 递归创建目录
function mkdirs(directory, callback) {
  var exists = fs.existsSync(directory)
  if (exists) {
    callback()
  } else {
    mkdirs(path.dirname(directory), function() {
      fs.mkdirSync(directory)
      callback()
    })
  }
}

// template.js
module.exports = {
  vueTemplate: poenntName => {
    return `<template>
 <div class="${poenntName}">
 ${poenntName}组件
 </div>
</template>
<script>
export default {
 name: '${poenntName}'
};
</script>
<style lang="stylus" scoped>
.${poenntName} {
};
</style>`
  },
  entryTemplate: poenntName => {
    return `import ${poenntName} from './main.vue'
export default [{
 path: "/${poenntName}",
 name: "${poenntName}",
 ponent: ${poenntName}
}]`
  }
}

// index.js`
const chalk = require('chalk')
const path = require('path')
const fs = require('fs')
const resolve = (...file) => path.resolve(__dirname, ...file)
const log = message => console.log(chalk.green(`${message}`))
const suessLog = message => console.log(chalk.blue(`${message}`))
const errorLog = error => console.log(chalk.red(`${error}`))
const {
  vueTemplate,
  entryTemplate
} = require('./template')
const generateFile = (path, data) => {
  if (fs.existsSync(path)) {
    errorLog(`${path}文件已存在`)
    return
  }
  return new Promise((resolve, reject) => {
    fs.writeFile(path, data, 'utf8', err => {
      if (err) {
        errorLog(err.message)
        reject(err)
      } else {
        resolve(true)
      }
    })
  })
}
log('请输入要生成的组件名称、如需生成全局组件，请加 global/ 前缀')
let ponentName = ''
process.stdin.on('data', async chunk => {
  const inputName = String(chunk).trim().toString()
    /
      组件目录路径
     /
  const ponentDirectory = resolve('../../src/ponents', inputName)
  /
    vue组件路径
   /
  const ponentVueName = resolve(ponentDirectory, 'main.vue')
    /
      入口文件路径
     /
  const entryComponentName = resolve(ponentDirectory, 'index.js')
  const hasComponentDirectory = fs.existsSync(ponentDirectory)
  if (hasComponentDirectory) {
    errorLog(`${inputName}组件目录已存在，请重新输入`)
    return
  } else {
    log(`正在生成 ponent 目录 ${ponentDirectory}`)
    await dotExistDirectoryCreate(ponentDirectory)
      // fs.mkdirSync(ponentDirectory);
  }
  try {
    if (inputName.includes('/')) {
      const inputArr = inputName.split('/')
      ponentName = inputArr[inputArr.length - 1]
    } else {
      ponentName = inputName
    }
    log(`正在生成 vue 文件 ${ponentVueName}`)
    await generateFile(ponentVueName, vueTemplate(ponentName))
    log(`正在生成 entry 文件 ${entryComponentName}`)
    await generateFile(entryComponentName, entryTemplate)
    suessLog('生成成功')
  } catch (e) {
    errorLog(e.message)
  }
  process.stdin.emit('end')
})
process.stdin.on('end', () => {
  log('exit')
  process.exit()
})
function dotExistDirectoryCreate(directory) {
  return new Promise((resolve) => {
    mkdirs(directory, function() {
      resolve(true)
    })
  })
}
// 递归创建目录
function mkdirs(directory, callback) {
  var exists = fs.existsSync(directory)
  if (exists) {
    callback()
  } else {
    mkdirs(path.dirname(directory), function() {
      fs.mkdirSync(directory)
      callback()
    })
  }
}

// template.js
module.exports = {
  vueTemplate: poenntName => {
    return `<template>
 <div class="${poenntName}">
 ${poenntName}组件
 </div>
</template>
<script>
export default {
 name: '${poenntName}'
};
</script>
<style lang="stylus" scoped>
.${poenntName} {
};
</style>`
  },
  entryTemplate: `import Main from './main.vue'
export default Main`
}