背景
在組件庫的開發(fā)中聚谁，每個組件目錄下的文件結(jié)構(gòu)，以及文件內(nèi)容是大體上相同的，因此利用命令的方式創(chuàng)建將是高效的。
組件基本信息輸入
這里使用到依賴庫 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來對文件進(jìn)行操作憎兽。
npm i handlebars fs-extra -D
創(chuàng)建模板
// 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中的字符被轉(zhuǎn)譯
傳入信息
compile({
comName:meta.compName
})
內(nèi)容輸出
const fs = require('fs-extra')
fs.output(resolve(__dirname,`./components/${comName}.vue`),content,error=>{
console.log(error)
})
最后
在package.json中添加執(zhí)行腳本冷离。
// package.json
{
...
"scripts": {
...
"create": "node ./createFile.js",
},
...
}
image.png
image.png
