成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

使用nodejs自動生成前端項(xiàng)目組件

468122151 / 2479人閱讀

摘要：代碼實(shí)施流程圖檢測文件夾讀取模板內(nèi)容寫入組件獲取命令行參數(shù)以為例，想要創(chuàng)建一個文件夾，首先先要獲取命令行當(dāng)中的。

腳本編寫背景

寫這個小腳本的初衷是，項(xiàng)目本身添加一個組件太繁瑣了，比如我想要去建立一個login的組件，那么我需要手動去IDE中，創(chuàng)建index.js(組件出口文件)，login.js(業(yè)務(wù)文件)，login.html，login.less這四個文件。因?yàn)槊總€組件都有一些輸出的代碼，還要把之前組件的那幾行拷貝過來，這種作業(yè)真的煩，于是乎寫了一個小腳本去自動完成這些功能。

PS:本腳本運(yùn)行環(huán)境是nodeV7以上，當(dāng)前時間2017/07，stable版本還是V6，最新的node版本為V8.1.3（current版本），如要運(yùn)行，請升級node版本為current版本。

預(yù)期效果

在命令行輸入：node set login
在conponents文件夾下面自動生成4個文件，并填寫index.js , login.js的文件公共內(nèi)容。
如果輸入多層文件如： node set login/foo
則會先檢測conponents文件夾下是否存在login，如不存在，先創(chuàng)建login文件夾，然后創(chuàng)建foo的組件。本腳本主要使用nodejs的fs模塊來完成需求。

fs模塊

fs模塊用于對系統(tǒng)文件及目錄進(jìn)行讀寫操作，本次主要用到的fs模塊的功能有：

fs.existsSync(path) 檢測文件夾是否存在，一個同步的API，只接受一個路徑參數(shù)，當(dāng)前版本異步的廢棄了。

fs.mkdir(path,callback) 創(chuàng)建文件夾，異步，兩個必填參數(shù)，路徑和回掉。

fs.readFileSync(path) 讀取文件，接受一個參數(shù)，文件路徑。

fs.writeFile(path,data,callback) 寫文件，接受三個參數(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為例，想要創(chuàng)建一個login文件夾，首先先要獲取命令行當(dāng)中的login。在nodejs當(dāng)中，獲取命令行參數(shù)使用process.argv這條命令返回一個數(shù)組，第一個參數(shù)為nodejs.exe的應(yīng)用所在絕對路徑，第二個參數(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);
    })
}

每個生成好的文件都需要一個創(chuàng)建的時間，及作者，包括文件的輸出，以及class等結(jié)構(gòu)，這些都是比較公用的，把他們寫在模板當(dāng)中，然后讀取出來，替換其中的關(guān)鍵詞，如時間，組件名等。

生成文件并寫入內(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個要讀取的模板，在生成文件之后，會將模板中的內(nèi)容填充進(jìn)去。

總結(jié)

以上就完成了一個自動生成前端項(xiàng)目組件的小腳本了，當(dāng)然，還可以繼續(xù)擴(kuò)充，比如這些組件其實(shí)還需要再到，組件管理的那個js中去注入，這些都可以用腳本完成，本文就到這里為止了。

項(xiàng)目地址：https://github.com/jiwenjiang...

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/83942.html

相關(guān)文章

  • GitHub 值得收藏的前端項(xiàng)目[每月更新...]

    摘要：也是一款優(yōu)秀的響應(yīng)式框架站點(diǎn)所使用的一套框架為微信服務(wù)量身設(shè)計(jì)的一套框架一組很小的，響應(yīng)式的組件，你可以在網(wǎng)頁的項(xiàng)目上到處使用一個可定制的文件，使瀏覽器呈現(xiàn)的所有元素，更一致和符合現(xiàn)代標(biāo)準(zhǔn)。 GitHub 值得收藏的前端項(xiàng)目 整理與收集的一些比較優(yōu)秀github項(xiàng)目，方便自己閱讀，順便分享出來，大家一起學(xué)習(xí)，本篇文章會持續(xù)更新，版權(quán)歸原作者所有。歡迎github star與fork 預(yù)...

    maxmin 評論0 收藏0

  • 我是如何使用React+Redux構(gòu)建大型應(yīng)用的

    摘要：所以前端工程師不僅僅是寫好頁面和做好兼容性。對前端工程師的技術(shù)能力也會帶來考驗(yàn)。這里想要說的是，如果使用了，使用了服務(wù)端渲染，對于前端工程師的個人素質(zhì)要求會比較高，因?yàn)樾枰幚砗芏喾?wù)端的問題。 背景 我們團(tuán)隊(duì)有個項(xiàng)目由于開發(fā)時間較長，且是前后端雜糅的開發(fā)方式，維護(hù)成本很高，在線上暴露的問題很多。而且因?yàn)閷恿斯疽话俣鄺l產(chǎn)品線，每天都會接到大量的客訴和產(chǎn)品線反饋的問題。2017年11...

    canopus4u 評論0 收藏0

  • 2014 杭JS大會 會議盛況與技術(shù)熱點(diǎn)現(xiàn)場報(bào)道（直播）

    摘要：中國開發(fā)者的年度盛會中國開發(fā)者大會，于年月日在杭州舉辦了本年度的杭會議我們的和將為在現(xiàn)場為您帶來現(xiàn)場的報(bào)道，一覽大牛風(fēng)采，直擊技術(shù)熱點(diǎn)。簽到中第日的會議即將開幕以下是與參會者和與博文視點(diǎn)的作者們合影 中國JS開發(fā)者的年度盛會JS中國開發(fā)者大會，于2014年6月21日在杭州舉辦了本年度的杭JS會議！ 我們SegmentFault的 @integ 和 @shamiao 將為在現(xiàn)場為您帶來...

    caige 評論0 收藏0

  • 記最近一次Nodejs全棧開發(fā)經(jīng)歷

    摘要：背景前段時間大部門下新成立了一個推廣百度文字識別圖像識別等科技能力在金融領(lǐng)域應(yīng)用的子部門。而且在百度內(nèi)部提倡的也是使用和。百度內(nèi)部有現(xiàn)成的服務(wù)接入文檔。 背景： 前段時間大部門下新成立了一個推廣百度OCR、文字識別、圖像識別等科技能力在金融領(lǐng)域應(yīng)用的子部門。因?yàn)椴块T剛成立，基礎(chǔ)設(shè)施和人力都是欠缺的。當(dāng)時分到我們部門的任務(wù)是抽調(diào)一個人做新部門主站前端開發(fā)工作。本來說的是只負(fù)責(zé)頁面的開發(fā)工...

    Lycheeee 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<