node.js require 自动执行脚本 并生成html,利用node.js实现自动生成前端项目组件的方法详解...
本文主要給大家介紹了關(guān)于利用node.js實(shí)現(xiàn)自動(dòng)生成前端項(xiàng)目組件的相關(guān)內(nèi)容，分享出來供大家參考學(xué)習(xí)，下面話不多說了，來一起看看詳細(xì)的介紹：
腳本編寫背景
寫這個(gè)小腳本的初衷是，項(xiàng)目本身添加一個(gè)組件太繁瑣了，比如我想要去建立一個(gè)login的組件，那么我需要手動(dòng)去IDE中，創(chuàng)建index.js(組件出口文件)，login.js(業(yè)務(wù)文件)，login.html，login.less這四個(gè)文件。因?yàn)槊總€(gè)組件都有一些輸出的代碼，還要把之前組件的那幾行拷貝過來，這種作業(yè)真的煩，于是乎寫了一個(gè)小腳本去自動(dòng)完成這些功能。
PS:本腳本運(yùn)行環(huán)境是nodeV7以上，當(dāng)前時(shí)間2017/07，stable版本還是V6，最新的node版本為V8.1.3(LTS版本)，如要運(yùn)行，請升級node版本為LTS版本。
預(yù)期效果
在命令行輸入：node set login
在conponents文件夾下面自動(dòng)生成4個(gè)文件，并填寫index.js , login.js的文件公共內(nèi)容。
如果輸入多層文件如： node set login/foo
則會(huì)先檢測conponents文件夾下是否存在login，如不存在，先創(chuàng)建login文件夾，然后創(chuàng)建foo的組件。本腳本主要使用nodejs的fs模塊來完成需求。
fs模塊
fs模塊用于對系統(tǒng)文件及目錄進(jìn)行讀寫操作，本次主要用到的fs模塊的功能有：
fs.existsSync(path)檢測文件夾是否存在，一個(gè)同步的API，只接受一個(gè)路徑參數(shù)，當(dāng)前版本異步的廢棄了。
fs.mkdir(path,callback) 創(chuàng)建文件夾，異步，兩個(gè)必填參數(shù)，路徑和回掉。
fs.readFileSync(path) 讀取文件，接受一個(gè)參數(shù)，文件路徑。
fs.writeFile(path,data,callback)寫文件，接受三個(gè)參數(shù)，文件路徑，向文件中寫的數(shù)據(jù)，回掉。
代碼實(shí)施
流程圖
async function creatCpt() {
try {
await exists(); // 檢測文件夾
await readFile(); // 讀取模板內(nèi)容
await writeFile(await readFile()); //寫入組件
}
catch (err) {
console.error(err);
}
}
獲取命令行參數(shù)
以node set login為例，想要?jiǎng)?chuàng)建一個(gè)login文件夾，首先先要獲取命令行當(dāng)中的login。在nodejs當(dāng)中，獲取命令行參數(shù)使用process.argv這條命令返回一個(gè)數(shù)組，第一個(gè)參數(shù)為nodejs.exe的應(yīng)用所在絕對路徑，第二個(gè)參數(shù)為當(dāng)前腳本所在的絕對路徑，之后所輸入的參數(shù)以空格分隔，如輸入node set aaa,得到：
檢測文件夾是否存在
let exists = function () {
return new Promise((res) => {
(async function () {
for (let a of path) {
fs.existsSync(basepath + a) ? basepath = `${basepath}${a}/` : await mkdir(a);
}
res(basepath);
})()
})
}
判斷是否存在文件夾，如果存在，重新拼接路徑繼續(xù)檢查，如不存在則生成文件夾。
創(chuàng)建文件夾
node set foo/bar
let mkdir = function (a) {
return new Promise((res, rej) => {
fs.mkdir(basepath + a, (err) => {
if (err) rej(err);
basepath = `${basepath}${a}/`
res(basepath);
});
})
}
創(chuàng)建文件夾成功后，重新拼接路徑，以便于繼續(xù)查找。
讀取模板內(nèi)容
let reads = [`${basepath}cptTemp/index.js`, `${basepath}cptTemp/cptTemp.js`];//要讀取的文件
let readFile = function () {
return new Promise((res) => {
for (let a of reads) {
let text = fs.readFileSync(a).toString();
text = text.replace(/time/g, moment().format('YYYY/MM/DD'))
.replace(/temp/g, name);
file.push(text)
}
res(file);
})
}
每個(gè)生成好的文件都需要一個(gè)創(chuàng)建的時(shí)間，及作者，包括文件的輸出，以及class等結(jié)構(gòu)，這些都是比較公用的，把他們寫在模板當(dāng)中，然后讀取出來，替換其中的關(guān)鍵詞，如時(shí)間，組件名等。
生成文件并寫入內(nèi)容
提前建立好要生成的文件和要讀取的文件。如：
let writes = [`${name}.js`, `${name}.html`, `${name}.less`, `index.js`];
let writeFile = function (file) {
return new Promise((res, rej) => {
(async function () {
for (let a of writes) {
await fs.writeFile(`${basepath}${a}`,
a == writes[3] ? file[0] : a == writes[0] ? file[1] : '', (err) => {
if (err) rej(err)
})
}
res('succ');
})()
})
}
目前只寫了2個(gè)要讀取的模板，在生成文件之后，會(huì)將模板中的內(nèi)容填充進(jìn)去。
總結(jié)
以上就完成了一個(gè)自動(dòng)生成前端項(xiàng)目組件的小腳本了，當(dāng)然，還可以繼續(xù)擴(kuò)充，比如這些組件其實(shí)還需要再到，組件管理的那個(gè)js中去注入，這些都可以用腳本完成，本文就到這里為止了。
好了，以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對的支持。
項(xiàng)目地址：https://github.com/jiwenjiang...
本地下載地址：http://xiazai.ddpool.cn/201707/yuanma/angularSeed(ddpool.cn).rar
總結(jié)
以上是生活随笔為你收集整理的node.js require 自动执行脚本 并生成html,利用node.js实现自动生成前端项目组件的方法详解...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： android程序退出 语句,andro
- 下一篇： html5重新加载页面,使用Angula