專案中的配置檔案都是幹嘛的?

語言: CN / TW / HK

大家好,我是東東吖。又到週末了,最近工作有點忙,但是我還是會保持每週給大家更新文章的,本文主要講述專案中的配置檔案的作用以及使用方法。

1、.gitignore

ignore:忽略的意思。顧名思義,這個配置檔案是用來管理git的,當你把檔名寫入這個檔案,這個檔案就會被忽略,不會被提交,當你把資料夾名寫入這個檔案,那麼整個資料夾都會被忽略,不會被提交。為啥要這個配置檔案呢?你想一想,我們下載的依賴包多大?這樣的大檔案肯定不能提交到git上去,而是提交上去了在線上部署下依賴包。還有類似小程式啊,由於包限制,我們會選擇把一些靜態檔案資源放在線上訪問,不會把前端本地的資原始檔提交上去、放在本地只是方便我們除錯和備份。

image.png

2、.eslintrc.js

這個配置檔案是用來管理eslint規則的,在多人開發中,如果你沒有設定eslint,而別人開啟eslingt了,那對於別人是災難性的,就拿我們公司的專案來說,這個專案是一個公眾號,主要是用來支付的,由於沒有太多業務邏輯,所有有整整一年沒有更新了,裡面一堆eslingt錯誤,也沒有人管。而我最近要在這個專案上做一些人臉識別,活體檢測,反洗錢等安全措施,每次修改一行程式碼,專案要跑10多秒,一點都沒誇張,看著一大堆eslint錯誤,我腦殼真的頭疼。

解決方法: 你可以用指令碼自動檢測和修改語法錯誤,親測有效。但是隻能修改一本部分。在package.json的script中加入這兩句指令碼執行即可。 image.png

再來看這個配置檔案,裡面的rules就是用來規定相關規則的。 - "off"  或 0 - 關閉這個規則檢查 - "warn"  或 1 - 開啟這個規則檢查並提示(不影響退出狀態) - "error"  或 2 - 開啟規則檢查並報錯 image.png

舉個例子,我們執行專案: image.png 這裡報了eslint錯誤,報的意思是期待使用'===',而實際用的'==',這個規則的關鍵字在roles/後面,也就是eqeqed。我們在配置檔案中配置 'eqeqeq':0,再次執行,就看不見這個錯誤了。

image.png

還有一個問題,如何不把它的規則關閉,就要修改正確,怎麼快速找到eslint錯誤在專案中的位置,並修改呢?

image.png

和我們專案名同目錄有一個NPM指令碼,點開找到對應的指令碼允許,控制檯就會列印對應的eslint錯誤這個時候我們就可以按住crtr鍵,點選對應的eslint錯誤,vscode就會自動幫我們跳到eslint對應的資料夾錯誤位置,按照要求修改正確即可。

image.png

3、.eslintignore

顧名思義,這個配置檔案是用來管理eslint需要忽略的檔案的,寫入這個配置裡面的檔案或者資料夾不會被eslint檢測到,和.gitignore作用類似。

image.png

4、package.json

這個配置檔案是用來管理包和指令碼的。比如我們剛剛在這個配置檔案加入了兩行指令碼,之後執行 npm run checklint 就可以檢測錯誤,執行npm run reviselint就可以自動修改部分selint錯誤。

image.png

5.package-lock.json

lock:鎖的意思,在街舞中有一種舞種就叫lockking,顧名思義這個檔案是用來鎖住包的,他會下載指定包的版本。

6.README.md

這是一個自訴檔案,可以用來描述怎麼跑這個專案,用到哪些技術等等。

image.png

7.favicon.icon

image.png 這個就是我們位址列的icon圖示,如果你需要替換,比如我們掘金的是一個鎖,把鎖的圖片命名成這個favicon.icon,替換專案中的圖片即可。這裡有時候會有快取,記得重新整理即可。

image.png

8、 index.html

image.png 這裡主要是用來配置專案位址列的title的,比如我修改title為東東吖,專案執行後就會顯示東東吖。也可以在這個配置檔案預載入一些資原始檔。

image.png

當然,這些只是最基礎的配置檔案,後續我還會繼續分享其他配置檔案並補充在這篇文章中。記得關注點贊收藏吖,後續補充之後我會提醒你們的。今天的分享就到這裡吧!

筆者往期好文:

手把手教你利用XSS攻擊體驗一次黑客

元件通訊的8種方式,你搞清楚了嗎?

從0到1學習Node.js系列教程(第一篇):API介面初體驗