從零開始,搭配eslint做乙個命令列工具

2021-09-14 04:34:00 字數 1026 閱讀 4221

如今前端工程化,自動化已經成為了新趨勢,如果我們要重新開始做乙個專案,你會花費多久的時間在前期環境的搭建上呢?在我們前端的的積累中,我們需要將這些技術沉澱下來,便於我們開始乙個新的專案,而不必花費過多的經歷在環境搭建中。

這次我做的是乙個felint 是乙個整合了 eslint、stylelint、git hook 的前端**檢查工具。專案已經開源在github上,名字叫做oishi,一開始想起名叫husky(哈士奇),後來這個名字被佔了(無奈臉)。

先來理一下我們這個工具需要做什麼事情

需要讓他初始化eslint,stylelint的配置檔案

安裝好我們需要的依賴

掛載git鉤子,在**提交時進行進行eslint檢查

有了目標我們開始實現我們這樣的乙個工具:

準備工作

這次我們採用commander來開發我們的命令列,

利用chalk來美化我們控制台的輸出,

利用shelljs來執行我們檔案中的一些指令碼

在本地除錯時需要在package.json中配置bin選項,然後開發好後npm link 發布到本地的全域性,就可以開始使用自己的命令列了

2.進入正題

對於之前提到的第一點,我們首先要有自己的乙個配置,在初始化的時候將它拉下來,我們在這裡將自己的配置扔到了github的倉庫中,可以參考一下我的專案目錄配置檔案,從github上拉下來後利用node原生的fs模組讀寫配置檔案。

我們所需要的依賴專案也都會記錄在配置檔案中,讀取檔案後與當前目錄下的package.json對比一下,利用shell執行安裝缺少的依賴即可

掛載git鉤子,有兩種方式,第一種,我們可以自己寫乙個pre-commit,也可以安裝pre-commit npm包,我們這裡採用了第一種方式,也是因為shell指令碼比較通用,到此為止,我們在本地已經開發完成了乙個命令列

3.結尾工作

我們在npm上註冊乙個自己的賬號,然後切換到專案目錄下,

npm login

npm publish

覺得有幫助的可以區點一下star

IntelliJ IDEA 從零開始建立乙個專案

1 如果intellij idea中當前沒有開啟的專案,單擊歡迎介面上的建立新專案。否則,選擇 然後會開啟新建專案嚮導視窗 2 在嚮導的第一頁,在左側窗格中,選擇專案類別。這可能是你要使用的技術,專案的目標平台或執行時等。在頁面的右側部分以及後續步驟中的設定取決於所選專案類別。對於相應的說明,請參閱...

IntelliJ IDEA 從零開始建立乙個專案

1 如果intellij idea中當前沒有開啟的專案,單擊歡迎介面上的建立新專案。否則,選擇 然後會開啟新建專案嚮導視窗 2 在嚮導的第一頁,在左側窗格中,選擇專案類別。這可能是你要使用的技術,專案的目標平台或執行時等。在頁面的右側部分以及後續步驟中的設定取決於所選專案類別。對於相應的說明,請參閱...

IntelliJ IDEA 從零開始建立乙個專案

1 如果intellij idea中當前沒有開啟的專案,單擊歡迎介面上的建立新專案。否則,選擇 然後會開啟新建專案嚮導視窗 2 在嚮導的第一頁,在左側窗格中,選擇專案類別。這可能是你要使用的技術,專案的目標平台或執行時等。在頁面的右側部分以及後續步驟中的設定取決於所選專案類別。對於相應的說明,請參閱...