使用nodejs自動生成前端專案元件

2021-09-16 21:09:40 字數 2456 閱讀 1578

寫這個小指令碼的初衷是,專案本身新增乙個元件太繁瑣了,比如我想要去建立乙個login的元件,那麼我需要手動去ide中,建立index.js(元件出口檔案),login.js(業務檔案),login.html,login.less這四個檔案。因為每個元件都有一些輸出的**,還要把之前元件的那幾行拷貝過來,這種作業真的煩,於是乎寫了乙個小指令碼去自動完成這些功能。

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模組來完成需求。

fs模組用於對系統檔案及目錄進行讀寫操作,本次主要用到的fs模組的功能有:

fs.existssync(path)檢測資料夾是否存在,乙個同步的api,只接受乙個路徑引數,當前版本非同步的廢棄了。

fs.mkdir(path,callback)建立資料夾,非同步,兩個必填引數,路徑和回掉。

fs.readfilesync(path)讀取檔案,接受乙個引數,檔案路徑。

fs.writefile(path,data,callback)寫檔案,接受三個引數,檔案路徑,向檔案中寫的資料,回掉。

}以node set login為例,想要建立乙個login資料夾,首先先要獲取命令行當中的login。在nodejs當中,獲取命令列引數使用process.ar**這條命令返回乙個陣列,第乙個引數為nodejs.exe的應用所在絕對路徑,第二個引數為當前指令碼所在的絕對路徑,之後所輸入的引數以空格分隔,如輸入node set aaa,得到:

判斷是否存在資料夾,如果存在,重新拼接路徑繼續檢查,如不存在則生成資料夾。

}建立資料夾成功後,重新拼接路徑,以便於繼續查詢。

let reads = [`$cpttemp/index.js`, `$cpttemp/cpttemp.js`];//要讀取的檔案

提前建立好要生成的檔案和要讀取的檔案。如:

目前只寫了2個要讀取的模板,在生成檔案之後,會將模板中的內容填充進去。

以上就完成了乙個自動生成前端專案元件的小指令碼了,當然,還可以繼續擴充,比如這些元件其實還需要再到,元件管理的那個js中去注入,這些都可以用指令碼完成,本文就到這裡為止了。

前端頁面與Nodejs使用websocket通訊

不要用瀏覽去直接去訪問websocket的位址!不要用瀏覽去直接去訪問websocket的位址!不要用瀏覽去直接去訪問websocket的位址!太傻了。就是頁面和服務端有個隱藏的通訊而已。前端1 例項化乙個ws物件 var wsuri ws websocket new websocket wsuri...

前端自動生成Change Log的實現

快速可互動的搭建生成change log更新日誌,來提高自己的工作效率。要實現change log自動生成,需要有指令碼可以根據專案提交的commit自動生成change log 然後還有指令碼自動生成版本號,而且每次生成可以自動修改版本號,還需要把生成的change log 的markdown檔案...

Jhipster前端vue使用JDL生成資料頁面

jdl檔案示例 表與字段配置 科目 entity subject 學段 entity stage 年級 entity grade entity keyword 關聯關係配置 relationship manytoone to subject,keyword to stage,keyword to g...