自定义命令，通过node脚本，生成组件模版

橙程橙

已于 2023-02-16 15:19:26 修改

阅读量774

点赞数 2

CC 4.0 BY-SA版权

分类专栏： nodeJS 文章标签：前端 javascript json node

于 2023-02-13 18:33:08 首次发布

本文链接：https://blog.youkuaiyun.com/rolinabc/article/details/129014711

nodeJS 专栏收录该内容

7 篇文章

订阅专栏

组内有组件库，在开发组件的过程中，发现大家在创建新组件的时候，都是cv之前的组件，然后再手动修改文件，觉得非常麻烦，所以就自己写了个node脚本，完成模版组件的生成。没有什么相关经验，所以基本是采用原生node来处理的，一边看文档，一边尝试，开发耗时3h。

涉及文件夹的创建，目录的获取，文件的复制及内容重写等，有意见欢迎指正呦～～～

小白可以瞅瞅，大佬绕道走哈

首先创建模版文件夹结构如下图（自己根据具体需求创建模版就行）

创建create.js文件后，在package.json中加入自定义命令，node执行该文件

create.js文件的内容如下所示

const inquirer = require('inquirer')
const path = require('path')
const fs = require('fs')
let answers_data = ''
const toggle = str => {
  let arr = str.split('-')
  let resStr = arr.reduce(function (prev, cur) {
    let str = prev + cur.slice(0, 1).toUpperCase() + cur.slice(1)
    return str
  }, '')
  return resStr
}

const copy = (source, target) => {
  // 读取目录下的文件，返回文件名及文件类型{name: 'xxx.txt, [Symbol(type)]: 1 }
  const sourceFile = fs.readdirSync(source, { withFileTypes: true })
  for (const file of sourceFile) {
    // 源文件 地址+文件名
    const srcFile = path.resolve(source, file.name)
    // 目标文件
    const tagFile = path.resolve(target, file.name)
    if (file.isDirectory() && !fs.existsSync(tagFile)) {
      fs.mkdirSync(tagFile, err => console.log(err))
      copy(srcFile, tagFile)
    } else if (file.isDirectory() && fs.existsSync(tagFile)) {
      // 文件是目录且已存在
      copy(srcFile, tagFile)
    }
    // fs.constants.COPYFILE_EXC 如果存在，如果目标路径已存在，则复制失败并出现错误
    !file.isDirectory() && fs.copyFileSync(srcFile, tagFile, fs.constants.COPYFILE_EXCL)
    if (path.basename(tagFile, '.json') === 'package' || path.basename(tagFile, '.js') === 'index') {
      fs.readFile(tagFile, 'utf8', (err, data) => {
        if (err) throw err
        data = data.replace('__name__', answers_data.name)
        data = data.replace('__description__', answers_data.description)
        data = data.replace(/__cname__/g, answers_data.cname)
        data = data.replace(/__componets__/g, toggle(answers_data.name))
        fs.writeFileSync(tagFile, data, 'utf8', () => {})
      })
    }
  }
}

inquirer
  .prompt([
    {
      type: 'input', //type： input, number, confirm, list, checkbox ...
      name: 'name', // key 名
      message: '请输入组件名', // 提示信息
      validate(input) {
        if (!input) {
          return '看这里！！！组件必须命名哦'
        }
        let path = /^[A-Za-z][A-Za-z]*(?:-[A-Za-z]+)*$/
        if (!path.test(input)) {
          return '组件名规定仅支持 字母&下划线，且需以字母开头/结尾'
        }
        return true
      },
    },
    {
      type: 'input', //type： input, number, confirm, list, checkbox ...
      name: 'cname', // key 名
      message: '请输入组件中文名', // 提示信息
      default: '默认组件名', // 默认值
    },
    {
      type: 'input', //type： input, number, confirm, list, checkbox ...
      name: 'description', // key 名
      message: '你对组件的描述', // 提示信息
      default: '业务组件', // 默认值
    },
  ])
  .then(answers => {
    answers_data = answers
    // 模版文件目录
    // process.cwd() 对应控制台所在目录
    const destUrl = path.join(process.cwd(), 'templates')
    let cwdUrl = path.join(process.cwd(), 'packages')
    // 判断是否已存在同名组件
    fs.readdir(cwdUrl, (err, data) => {
      if (err) throw err
      if (data.includes(answers.name)) {
        console.error('已经存在同名组件，请重新命名哦')
      } else {
        // 生成文件目录
        cwdUrl = path.resolve(cwdUrl, answers.name)
        fs.mkdirSync(cwdUrl)
        copy(destUrl, cwdUrl)
      }
    })
  })