命令行利用模板创建文件

背景

在组件库的开发中，每个组件目录下的文件结构，以及文件内容是大体上相同的，因此利用命令的方式创建将是高效的。

组件基本信息输入

这里使用到依赖库 inquirer,通过它我们可以方便的从命令行中获取到想要的信息。

async function getMeta() {
  const meta = await inquirer.prompt([
    {
      type: "input",
      message: "请输入你要新建的组件名（纯英文，大写开头）：",
      name: "compName",
    },
    {
      type: "input",
      message: "请输入你要新建的组件名（中文）：",
      name: "compZhName",
    },
    {
      type: "input",
      message: "请输入组件的功能描述：",
      name: "compDesc",
      default: "这是一个新组件",
    },
  ]);
  const { compName } = meta;
  meta.compClassName = compName;

  return meta;
}

可以观察到上面的代码，inquirer.prompt返回的是一个Promise。

模板信息处理

这里使用到的库是 handlebars,它是一种简单的模板语言。同时还利用到 fs-extra来对文件进行操作。

npm i handlebars fs-extra -D

创建模板

// template/index.tpl

获取模板

 const tmp = fs.readFileSync(resolve(__dirname, `./template/${path}`), 'utf-8')

编译

const handlebars  = require("handlebars")
const compile = handlebars.compile(temp,{noEscape:true}) // noEscape防止html中的字符被转译

传入信息

compile({
   comName:meta.compName
})

内容输出

const fs = require('fs-extra')
fs.output(resolve(__dirname,`./components/${comName}.vue`),content,error=>{
 console.log(error)
})

最后

在package.json中添加执行脚本。

// package.json
{
...
"scripts": {
    ...
    "create": "node ./createFile.js",
  },
...
}

image.png

image.png