用commander做一個自己的eslint腳手架
- 2019 年 11 月 20 日
- 筆記
如今前端工程化，自動化已經成為了新趨勢，如果我們要重新開始做一個項目，你會花費多久的時間在前期環境的搭建上呢？在我們前端的的積累中，我們需要將這些技術沉澱下來，便於我們開始一個新的項目，而不必花費過多的經歷在環境搭建中。
這次我做的是一個集成了 eslint、stylelint、git hook 的前端程式碼檢查工具。項目已經開源在github上，名字叫做oishi,一開始想起名叫husky(哈士奇),後來這個名字被佔了(無奈臉)。
先來理一下我們這個工具需要做什麼事情
- 需要讓他初始化eslint,stylelint的配置文件
- 安裝好我們需要的依賴
- 掛載git鉤子，在程式碼提交時進行進行eslint檢查
有了目標我們開始實現我們這樣的一個工具：
1.準備工作
- 這次我們採用commander來開發我們的命令行，
- 利用chalk來美化我們控制台的輸出，
- 利用shelljs來執行我們文件中的一些腳本
在本地調試時需要在package.json中配置bin選項，然後開發好後npm link 發布到本地的全局，就可以開始使用自己的命令行了
2.進入正題
對於之前提到的第一點，我們首先要有自己的一個配置，在初始化的時候將它拉下來，我們在這裡將自己的配置扔到了github的倉庫中，可以參考一下我的項目目錄配置文件,從github上拉下來後利用node原生的fs模組讀寫配置文件。
我們所需要的依賴項目也都會記錄在配置文件中，讀取文件後與當前目錄下的package.json對比一下，利用shell執行安裝缺少的依賴即可
掛載git鉤子，有兩種方式，第一種，我們可以自己寫一個pre-commit,也可以安裝pre-commit npm包，我們這裡採用了第一種方式，也是因為shell腳本比較通用，到此為止，我們在本地已經開發完成了一個命令行,在我們將我們寫的pre-commit,移入到git hooks下面的時候，記得要加許可權， chmod +x pre-commit pre-commit如何編寫，相信網上有很多了，這裡我給一個大概的實現思路 首先是獲取到你要eslint的程式碼，
JS_FILES=$(git diff --cached --name-only --diff-filter=ACM | grep -E "(.js?)$") CSS_FILES=$(git diff --cached --name-only --diff-filter=ACM | grep -E "(.p?css)$")
然後調用自己的eslint命令， oishi lintjs --exitcode $JS_FILES 最後判斷返回值， 有一個小坑的地方在於你的入口文件處，你要聲明一下自己的node路徑 #!/usr/bin/env node 3.結尾工作
我們在npm上註冊一個自己的帳號，然後切換到項目目錄下，
npm login npm publish
對於一些具體的技術細節可以參見我項目中的源碼，也可以在下方評論留言
