背景
在组件库的开发中，每个组件目录下的文件结构，以及文件内容是大体上相同的，因此利用命令的方式创建将是高效的。
组件基本信息输入
这里使用到依赖库 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
<template>
<div>
{{comName}}
</div>
</template>
<script>
export default {
data(){
return {
}
},
mounted(){
},
methods:{
}
}
</script>
<style>
</style>
获取模板
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
