vite + react + ts 手摸手做項目系列一 （項目配置篇）
前言
說好的教程終于來了，文章主要帶大家打造一個 react spa 的項目，使用的技術(shù)棧是 vite+react+ts,vite 的快想必我就不用介紹了，用過的都說好， react + ts 已經(jīng)成為大型項目的主流，大廠極為青睞，所以學(xué)好 react + ts 對你之后想進(jìn)大廠應(yīng)該會如虎添翼， 本項目會有嚴(yán)格的規(guī)范性，eslint 規(guī)范，stylelint 規(guī)范，ts 類型規(guī)范，git 提交規(guī)范，包括打包上線體積分析，性能分析，以及何如做項目的想能優(yōu)化。帶你領(lǐng)略多人合作大型項目的開發(fā)"樂趣"，功能開發(fā)架構(gòu)也是集成社區(qū)的優(yōu)秀實踐，讓我們一起來開始搭建項目吧 第一篇文章主要來說一說在開始寫實際業(yè)務(wù)代碼之前的一些項目的基礎(chǔ)配置工作 項目地址: https://github.com/whylisa/vite-react-template-typescript
技術(shù)棧前瞻
模版：使用的是vite的官方模版 react 17+ typescript 4+
yarn create vite why-react --template react-tsless: 項目中l(wèi)ess文件的命名都要以module.less 結(jié)尾
yarn add lessgit 代碼提交校驗,
yarn add yorkie lint-staged -D使用的yorkie 沒有使用husky,yorkie是yyds fork husky出來的, 然后做了一些定制化的改動，使得鉤子能從package.json的 "gitHooks"屬性中讀取。
gitHooks Git Hooks 就是在 Git 執(zhí)行特定事件（如commit、push、receive等）時觸發(fā)運行的腳本，類似于“鉤子函數(shù)”，沒有設(shè)置可執(zhí)行的鉤子將被忽略。在項目的 .git/hooks 目錄中，有一些 .sample 結(jié)尾的鉤子示例腳本，如果想啟用對應(yīng)的鉤子，只需手動刪除后綴，即可。（刪除某一個 hook 的后綴 .sample 即可啟用該 hook 腳本，默認(rèn)是不啟用的。）
在代碼提交之前，進(jìn)行代碼規(guī)則檢查能夠確保進(jìn)入git庫的代碼都是符合代碼規(guī)則的。但是整個項目上運行l(wèi)int速度會很慢，lint-staged能夠讓lint只檢測暫存區(qū)的文件
eslint 多人代碼規(guī)范的重要性我就不再贅述了，非常非常重要
eslint yarn add eslint -D
// 然后終端運行
npx eslint --init
// 項目根目錄會自動新建.eslintrc.js文件 注意：不要用自帶的npm安裝會裝不了對應(yīng)插件
module.exports = {
env: {
browser: true,
es2021: true,
node: true,
},
extends: [
"eslint:recommended",
"plugin:react/recommended",
"plugin:@typescript-eslint/recommended",
],
parser: "@typescript-eslint/parser",
parserOptions: {
ecmaFeatures: {
jsx: true,
},
ecmaVersion: 12,
sourceType: "module",
},
plugins: ["react", "@typescript-eslint"],
rules: {
"arrow-body-style": 0,
"jsx-a11y/label-has-for": 0,
"max-lines-per-function": [
2,
{ max: 320, skipComments: true, skipBlankLines: true },
],
"no-confusing-arrow": 0,
"no-nested-ternary": 0,
"no-console": 2,
"no-param-reassign": [
2,
{ props: true, ignorePropertyModificationsFor: ["draft"] },
],
"react/no-this-in-sfc": 0,
},
};prettier
用來做代碼格式化，有了Prettier之后，它能去掉原始的代碼風(fēng)格，確保團隊的代碼使用統(tǒng)一相同的格式，用官網(wǎng)的原話是"Building and enforcing a style guide"
它和Linter系列比如ESLint的區(qū)別在于Prettier是一個專注于代碼格式化的工具，對代碼不做質(zhì)量檢查，但是如果團隊規(guī)則不統(tǒng)一，你就知道什么叫一拉代碼一篇紅的感覺
yarn add prettier -Dstylelint
// 終端運行
yarn add stylelint stylelint-config-standard -D
// .stylelintrc.js 配置
module.exports = {
extends: "stylelint-config-standard",
rules: {
// 顏色值小寫
"color-hex-case": "lower",
// 注釋前無須空行
"comment-empty-line-before": "never",
// 使用數(shù)字或命名的 (可能的情況下) font-weight 值
"font-weight-notation": null,
// 在函數(shù)的逗號之后要求有一個換行符或禁止有空白
"function-comma-newline-after": null,
// 在函數(shù)的括號內(nèi)要求有一個換行符或禁止有空白
"function-parentheses-newline-inside": null,
// url使用引號
"function-url-quotes": "always",
// 字符串使用單引號
"string-quotes": "single",
// 禁止低優(yōu)先級的選擇器出現(xiàn)在高優(yōu)先級的選擇器之后
"no-descending-specificity": null,
// 禁止空源
"no-empty-source": null,
// 禁止缺少文件末尾的換行符
"no-missing-end-of-source-newline": null,
},
};styleLint 是『一個強大的、現(xiàn)代化的 CSS 檢測工具』, 與 ESLint 類似, 是通過定義一系列的編碼風(fēng)格規(guī)則幫助我們避免在樣式表中出現(xiàn)錯誤. css樣式的書寫順序及原理——很重要！很重要！很重要！概括講就是，它涉及了瀏覽器的渲染原理：reflow和repaint 很多小伙伴可能沒有什么概念 請參考css樣式的書寫順序及原理——很重要！ 》》》更多敬請期待
編輯器配置
推薦使用 webstorm 打開preferences 直接搜索 eslint stylelint prettier 直接勾就好 stylelint
eslint
prettier 
項目目錄劃分
React 中存在 UI 組件和容器組件的概念。顧名思義，UI 組件主要控制組件的顯示，并不是與過多的邏輯耦合，容器組件中實現(xiàn)一些具體的邏輯，引入 UI 組件作為其子組件，將子組件（UI 組件）需要的一些數(shù)據(jù)通過組件間傳值的方式方式傳遞到 UI 組件，進(jìn)行數(shù)據(jù)的渲染。本項目也會按照此規(guī)則進(jìn)行頁面劃分 components 公共組件 此目錄下放的全部是純凈的組件不和業(yè)務(wù)掛鉤的，后期我也會把這個單獨發(fā)包到npm上 materials 業(yè)務(wù)公共組件 此目錄下放的是和當(dāng)前業(yè)務(wù)耦合的組件和業(yè)務(wù)掛鉤 hooks 自定義 hooks pages 頁面組件 service 接口定義 utils 工具類
環(huán)境配置
跨域
面試賊喜歡問，基本上除了配置下本地代理，發(fā)版上線前端是不處理跨域的，在絕大部分場景下。 本地代理 server: {
port: 3001,
proxy: {
"/XXX": {
target: "https://XXX",
changeOrigin: true,
cookieDomainRewrite: "",
secure: false,
},
},
},線上 nginx
package.json 文件配置
我們
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"serve": "vite preview",
// 主要配置 觸發(fā)pre-commit 進(jìn)行elint stylelint 格式校驗
"lint": "npm run lint:js && npm run lint:style && npm run lint:prettier",
"lint:js": "eslint --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src",
"lint:prettier": "prettier --check "**/*" --end-of-line auto",
"lint:style": "stylelint --fix "src/**/*.less" --syntax less",
"lint-staged": "lint-staged",
"lint-staged:js": "eslint --ext .js,.jsx,.ts,.tsx "
},
// 使用yorkie 來自動觸發(fā)識別 gitHooks這個鉤子，然后執(zhí)行pre-commit 然后在執(zhí)行l(wèi)int-staged
"gitHooks": {
"pre-commit": "lint-staged"
},
// lint-staged 配置 校驗less,ts,tsx等文件有無不規(guī)范寫法
"lint-staged": {
"*.less": "stylelint --syntax less",
"*.{js,jsx,ts,tsx}": "npm run lint-staged:js",
"*.{js,jsx,tsx,ts,less,md,json}": [
"prettier --write"
]
},
end
項目地址:歡迎star fork https://github.com/whylisa/vite-react-template-typescript 本項目會同步有視頻教程，會在B站不定期直播，帶大家在線敲這個項目,我們相互學(xué)習(xí) 關(guān)注公眾號前端要努力，加博主微信，進(jìn)群獲取一手直播信息
評論
圖片
表情