Less Music

仓库地址

开发者

后端

因为 react app 默认跑在 3000 端口，避免后端与 react app 端口冲突，统一将后端的端口修改成 4000

技术栈/库

react / typescript
chakraUI：组件/UI
Framer-Motion：motion 动效
react-icons：图标
ahooks：自定义 hooks
lottie-react：lottie 动画
- lottie-files：动画素材
react-router-dom v6：路由
embla-carousel：轮播图

需求：

axios 封装
loading 过渡
react-router-dom 封装
状态管理封装
hooks 尽量使用 ahooks，再考虑自己封装
骨架屏
虚拟列表
react-carousel
数据缓存
夜间模式
鉴权

commit 规范

Git 提交的粒度要尽量小，比如每完成一个功能或修复一个 bug 尽量都进行提交

git commit的message格式如下：

<type>(<scope>): <subject>、
scope 指影响范围，具体到包即可
subject 指具体修改内容

type包括：

feat:  新功能

fix:  修改bug

refactor:  代码重构

docs:  文档变更

style:  代码格式修改, 不影响代码含义的更改（空格、格式、缺少分号等），注意不是 css 修改

test:  测试用例修改

chore:  其他修改, 比如构建流程, 依赖管理或辅助工具和库的更改，例如文档生成

pref:  优化性能

build:  对项目构建或者依赖的改动

ci:  CI 的修改

revert:  evert 前一个 commit

merge：合并分支

因为配置了commitlint和cz，所以以后只需要执行命令cz并按照其指定的规范就可以。

项目搭建

为方便以后同学了解搭建团队项目的过程，记录一次项目构建的流程。

创建项目

npx creat-react-app或npx create-next-app@latest或者是使用vite创建项目等。

配置路径别名：

npm i -D react-app-rewired customize-cra

可以将react-app隐藏起的 webpack 配置重新暴露出来，但是不推荐。使用customize-cra来覆盖配置。

在根目录下创建config-overrides.js:

const { override, addWebpackAlias } = require("customize-cra")
const path = require("path")
module.exports = override(
    addWebpackAlias({
        "@": path.resolve("./src")
    })
)

在tsconfig.json中添加：

"baseUrl": "src",
"paths": {
 	"@/*": [
		"*"
	]
}

项目文件结构：

- public 资源文件（img、svg等）
- src
	- pages 视图
		- home home页面模块
        	- index.tsx
			- index.css
			- 私有子组件文件夹
    	- login login页面模块
    - components 公共组件模块
    	- index.ts 导出所有组件
    - routers 路由文件
    - store 状态管理
    - utils 工具函数（文件以.util结尾）
		-scroll.util.ts
	- hooks 自定义hooks
		- useModal.ts
	- styles 样式文件
    - service api请求（文件以.api结尾）
		- login.api.ts
	- constans 常量（const 变量名大写）
	- types ts类型文件

多文件用一个index.ts来统一管理，导出成员

路由：

react-router-dom

hooks

网络请求：

axios

代码规范：

Eslint

安装devDependencies：

npm i -D eslint eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks

初始化.eslintrc.js：

eslint --init
// 或者
npm init @eslint/config

选择 problems -> esm -> react -> typescript -> browser，生成 JSON 配置文件。

配置.eslintrc.json：

{
    "env": {
        "browser": true,
        "es2021": true,
        "jest": true
    },
    "extends": [
        "react-app",
        "react-app/jest",
        "eslint:recommended",
        "plugin:react/recommended",
        "plugin:import/typescript",
        "plugin:prettier/recommended",
        "plugin:@typescript-eslint/recommended"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": "latest",
        "sourceType": "module",
        "project": "./tsconfig.json"
    },
    "plugins": ["react", "react-hooks", "prettier", "@typescript-eslint"],
    "settings": {
        "react": {
            "version": "detect"
        }
    },
    "rules": {
        // 0-禁用，1-warn，2-error
        "semi": [2, "never"], // 行末分号
        "quotes": [2, "double"], //双引号
        "no-console": 0 // 禁用 console
    }
}

之后编写 rules。

但是发现一个问题：在编写根路径下的.js文件时，发现eslint规则不适用与这些 js 文件，报错如下：

Parsing error: "parserOptions.project" has been set for @typescript-eslint/parser.
The file does not match your project config: config-overrides.js.
The file must be included in at least one of the projects provided.

解决方法，在.eslintrc.json中，给 parserOptions 指定文件类型：

"overrides": [
        {
            "files": [
                "*.ts",
                "*.tsx"
            ],
            "parserOptions": {
                "ecmaFeatures": {
                    "jsx": true
                },
                "ecmaVersion": "latest",
                "sourceType": "module",
                "project": [
                    "./tsconfig.json"
                ]
            }
        }
    ],

prettier

安装devDependencies：

npm i -D prettier eslint-config-prettier eslint-plugin-prettier

此时回去修改 eslint 配置，在 extends 扩展中加入：

"plugin:prettier/recommended"

此外，在 plugins 中加入prettier

创建.prettierrc.js文件，写入配置：

module.export = {
    printWidth: 80,
    tabWidth: 4,
    useTabs: false, // 使用空格代替tab缩进
    singleQuote: false, // 使用单引号
    jsxSingleQuote: false,
    semi: false, // 分号
    trailingComma: "none", // 对面末尾加分号，<es5|none|all>
    bracketSpacing: true, // 在对象前后添加空格-eg: { foo: bar }
    jsxBracketSameLine: false, // 多属性html标签的‘>’折行放置
    arrowParens: "avoid", // 箭头函数单参数时省略括号
    endOfLine: "auto"
}

注意，使用.js 后缀的 prettierrc 文件无法被正确识别，改成.json 文件格式才能正确被识别！

tsconfig

配置 tsconfig.json

团队协作：

git

commitizen 使用

commitizen 是一个 cli 工具，用于规范化 git commit 信息，可以代替 git commit，建议全局安装。

npm install -g commitizen
commitizen init cz-conventional-changelog --save-dev --save-exact
echo '{ "path": "cz-conventional-changelog" }' > ~/.czrc

之后就可以直接使用git cz命令来代替 commit。

项目配合husky和commitlint做 message 校验

npm i -D husky commitlint

在项目根目录下新增一个.commitlintrc.js文件，内容如下：

module.exports = {
    extends: ["@commitlint/config-conventional"]
}

添加.husky/commit-msg文件，执行下面命令可自动添加：

npx husky install
npx husky add .husky/commit-msg "npx --no-install commitlint --edit "$1""

安装@commitlint/config-conventional

npm i -D @commitlint/config-conventional cz-customizable

之后尝试进行不规范的 commit：

可选：自定义提示信息并显示为中文：

在根目录添加.cz-config.js 文件，用于自定义提示信息。修改package.json：

"config": {
        "commitizen": {
            "path": "node_modules/cz-customizable"
        }
    }
}

自动生成 changelog

npm i -D standard-version

在package.json添加如下配置：

{
  "scripts": {
    "release": "standard-version"
  }
}

在项目的根目录下添加配置文件 .versionrc

husky 与 lint-staged

在 git 提交代码时，通过 prettier 来优化代码。在代码提交之前，进行代码规则检查能够确保进入 git 库的代码都是符合代码规则的。

husky：一个方便用来处理 pre-commit 、 pre-push 等 githooks 的工具
lint-staged：对 git 暂存区的代码，运行 linters 的工具

npm i lint-staged -D
npx husky add .husky/pre-commit "npm run lint" # 创建husky的pre-commit钩子

在package.json中添加配置：

{
    "scripts": {
        "lint": "lint-staged --allow-empty",
    },
    "lint-staged": {
        "src/**/*.{js,jsx,ts,tsx}": [
            "prettier --write",
            "eslint --fix"
        ]
    },
}

之后执行cz来 commit 的时候就会自动检测代码和格式化：

PacificD / less-music