使用nodejs自動生成前端項目組件

時間 2019-11-07

標籤使用 nodejs 自動生成前端項目組件简体版

原文原文鏈接

腳本編寫背景

寫這個小腳本的初衷是，項目自己添加一個組件太繁瑣了，好比我想要去創建一個login的組件，那麼我須要手動去IDE中，建立index.js(組件出口文件)，login.js(業務文件)，login.html，login.less這四個文件。由於每一個組件都有一些輸出的代碼，還要把以前組件的那幾行拷貝過來，這種做業真的煩，因而乎寫了一個小腳本去自動完成這些功能。html

PS:本腳本運行環境是nodeV7以上，當前時間2017/07，stable版本仍是V6，最新的node版本爲V8.1.3（current版本），如要運行，請升級node版本爲current版本。前端

預期效果

在命令行輸入：node set login
在conponents文件夾下面自動生成4個文件，並填寫index.js , login.js的文件公共內容。
若是輸入多層文件如： node set login/foo
則會先檢測conponents文件夾下是否存在login，如不存在，先建立login文件夾，而後建立foo的組件。本腳本主要使用nodejs的fs模塊來完成需求。node

fs模塊

fs模塊用於對系統文件及目錄進行讀寫操做，本次主要用到的fs模塊的功能有：git

fs.existsSync(path) 檢測文件夾是否存在，一個同步的API，只接受一個路徑參數，當前版本異步的廢棄了。github
fs.mkdir(path,callback) 建立文件夾，異步，兩個必填參數，路徑和回掉。數組
fs.readFileSync(path) 讀取文件，接受一個參數，文件路徑。less
fs.writeFile(path,data,callback) 寫文件，接受三個參數，文件路徑，向文件中寫的數據，回掉。異步

代碼實施

流程圖

async function creatCpt() {
    try {
        await exists(); // 檢測文件夾
        await readFile(); // 讀取模板內容
        await writeFile(await readFile()); //寫入組件
    }
    catch (err) {
        console.error(err);
    }
}

獲取命令行參數

以node set login爲例，想要建立一個login文件夾，首先先要獲取命令行當中的login。在nodejs當中，獲取命令行參數使用process.argv這條命令返回一個數組，第一個參數爲nodejs.exe的應用所在絕對路徑，第二個參數爲當前腳本所在的絕對路徑，以後所輸入的參數以空格分隔，如輸入node set aaa,獲得：
async

檢測文件夾是否存在

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);
        })()
    })
}

判斷是否存在文件夾，若是存在，從新拼接路徑繼續檢查，如不存在則生成文件夾。spa

建立文件夾

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);
        });
    })
}

建立文件夾成功後，從新拼接路徑，以便於繼續查找。

讀取模板內容

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);
    })
}

每一個生成好的文件都須要一個建立的時間，及做者，包括文件的輸出，以及class等結構，這些都是比較公用的，把他們寫在模板當中，而後讀取出來，替換其中的關鍵詞，如時間，組件名等。

生成文件並寫入內容

提早創建好要生成的文件和要讀取的文件。如：

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個要讀取的模板，在生成文件以後，會將模板中的內容填充進去。