vite + react + ts 手摸手做項目系列一（項目配置篇）

前言

說好的教程終於來了，文章主要帶大家打造一個 react spa 的項目，使用的技術棧是 vite+react+ts,vite 的快想必我就不用介紹了，用過的都說好， react + ts 已經成為大型項目的主流，大廠極為青睞，所以學好 react + ts 對你之后想進大廠應該會如虎添翼，
本項目會有嚴格的規范性，eslint 規范，stylelint 規范，ts 類型規范，git 提交規范，包括打包上線體積分析，性能分析，以及何如做項目的想能優化。帶你領略多人合作大型項目的開發"樂趣"，功能開發架構也是集成社區的優秀實踐，讓我們一起來開始搭建項目吧
第一篇文章主要來說一說在開始寫實際業務代碼之前的一些項目的基礎配置工作
項目地址: vite-react-ts

技術棧前瞻

模版：使用的是vite的官方模版 react 17+ typescript 4+
```
yarn create vite  why-react --template react-ts
復制代碼
```
less: 項目中less文件的命名都要以module.less 結尾
```
yarn add less
復制代碼
```
git 代碼提交校驗,
```
yarn add yorkie lint-staged -D
復制代碼
```
- 使用的yorkie 沒有使用husky,yorkie是yyds fork husky出來的, 然后做了一些定制化的改動，使得鈎子能從package.json的 "gitHooks"屬性中讀取。
- gitHooks Git Hooks 就是在 Git 執行特定事件（如commit、push、receive等）時觸發運行的腳本，類似於“鈎子函數”，沒有設置可執行的鈎子將被忽略。在項目的 .git/hooks 目錄中，有一些 .sample 結尾的鈎子示例腳本，如果想啟用對應的鈎子，只需手動刪除后綴，即可。（刪除某一個 hook 的后綴 .sample 即可啟用該 hook 腳本，默認是不啟用的。）
- 在代碼提交之前，進行代碼規則檢查能夠確保進入git庫的代碼都是符合代碼規則的。但是整個項目上運行lint速度會很慢，lint-staged能夠讓lint只檢測暫存區的文件

eslint 多人代碼規范的重要性我就不再贅述了，非常非常重要

eslint yarn add eslint -D
// 然后終端運行
npx eslint --init

// 項目根目錄會自動新建.eslintrc.js文件 注意：不要用自帶的npm安裝會裝不了對應插件
 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之后，它能去掉原始的代碼風格，確保團隊的代碼使用統一相同的格式，用官網的原話是"Building and enforcing a style guide"
- 它和Linter系列比如ESLint的區別在於Prettier是一個專注於代碼格式化的工具，對代碼不做質量檢查，但是如果團隊規則不統一，你就知道什么叫一拉代碼一篇紅的感覺
```
yarn add prettier -D
復制代碼
```

stylelint

styleLint 是『一個強大的、現代化的 CSS 檢測工具』, 與 ESLint 類似, 是通過定義一系列的編碼風格規則幫助我們避免在樣式表中出現錯誤.
css樣式的書寫順序及原理——很重要！很重要！很重要！概括講就是，它涉及了瀏覽器的渲染原理：reflow和repaint
很多小伙伴可能沒有什么概念請參考css樣式的書寫順序及原理——很重要！

// 終端運行
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",
    // 使用數字或命名的 (可能的情況下) font-weight 值
    "font-weight-notation": null,
    // 在函數的逗號之后要求有一個換行符或禁止有空白
    "function-comma-newline-after": null,
    // 在函數的括號內要求有一個換行符或禁止有空白
    "function-parentheses-newline-inside": null,
    // url使用引號
    "function-url-quotes": "always",
    // 字符串使用單引號
    "string-quotes": "single",
    // 禁止低優先級的選擇器出現在高優先級的選擇器之后
    "no-descending-specificity": null,
    // 禁止空源
    "no-empty-source": null,
    // 禁止缺少文件末尾的換行符
    "no-missing-end-of-source-newline": null,
    },
   };
復制代碼

》》》更多

編輯器配置

推薦使用 webstorm 打開preferences 直接搜索 eslint stylelint prettier 直接勾就好
stylelint

eslint

prettier

項目目錄划分

React 中存在 UI 組件和容器組件的概念。顧名思義，UI 組件主要控制組件的顯示，並不是與過多的邏輯耦合，容器組件中實現一些具體的邏輯，引入 UI 組件作為其子組件，將子組件（UI 組件）需要的一些數據通過組件間傳值的方式方式傳遞到 UI 組件，進行數據的渲染。本項目也會按照此規則進行頁面划分
components 公共組件
- 此目錄下放的全部是純凈的組件不和業務掛鈎的，后期我也會把這個單獨發包到npm上
materials 業務公共組件
- 此目錄下放的是和當前業務耦合的組件和業務掛鈎
hooks 自定義 hooks
pages 頁面組件
service 接口定義
utils 工具類

環境配置

跨域

面試賊喜歡問，基本上除了配置下本地代理，發版上線前端是不處理跨域的，在絕大部分場景下。

本地代理

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",
 // 主要配置 觸發pre-commit 進行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 來自動觸發識別 gitHooks這個鈎子，然后執行pre-commit 然后在執行lint-staged 
 "gitHooks": {
 "pre-commit": "lint-staged"
 },
 // lint-staged 配置 校驗less,ts,tsx等文件有無不規范寫法
 "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 vite-react-ts
本項目會同步有視頻教程，會在某站不定期直播，帶大家在線敲這個項目,我們相互學習

vite + react + ts 手摸手做項目系列一 （項目配置篇）

前言

技術棧前瞻

編輯器配置

項目目錄划分

環境配置

跨域

package.json 文件配置

end

免責聲明！

vite + react + ts 手摸手做項目系列一（項目配置篇）