共计 6156 个字符，预计需要花费 16 分钟才能阅读完成。
本文记录了应用 vitejs, antd, react, redux 搭建我的项目过程，其它蕴含了集成 jest 单元测试，tailwindcss 应用，eslint 代码格式化以及 git 代码提交规范化等性能。
1. 初始化我的项目
咱们应用 Vite.js 来打包咱们的代码。
运行如下命令：
pnpm create vite会呈现如下的抉择：
√ Project name: ... react-redux-starter # 设置我的项目名 这里咱们设置为 react-redux-starter
√ Select a framework: » React # 抉择框架 React
√ Select a variant: » TypeScript + SWC 到这里咱们我的项目初始化实现。这时能够看到咱们初始化的我的项目目录如下：
react-redux-starter
│ .gitignore
│ index.html
│ package.json
│ tsconfig.json # typescript 配置文件
│ tsconfig.node.json # typescript 配置文件
│ vite.config.ts # vite 配置文件
│
├─public
│ vite.svg
│
└─src
│ App.css
│ App.tsx
│ index.css
│ main.tsx
│ vite-env.d.ts
│
└─assets
react.svg这里咱们先把初始化的代码清理一下：
App.css，index.css 清空
// App.tsx
import './App.css'
function App() {
return (
<div>
Hello world!
</div>
)
}
export default App
这一步骤 代码参考
2 集成 antd 与 tailwindcss
pnpm add antd @ant-design/icons
pnpm install -D tailwindcss postcss autoprefixer
# 生成 tailwind 配置文件
npx tailwindcss init -p运行完以上命令，在根目录下会生成两个配置文件 postcss.config.js 和 tailwindcss.config.js, 其中 postcss.config.js 这个文件是不须要批改的，咱们用默认的生成的就行。而后咱们批改一下 tailwindcss.config.js 这个配置文件如下：
/** @type {import('tailwindcss').Config} */
module.exports = {
// content 配置 tailwind 要解决的文件。// 只有在这里配置的文件，能力应用 tailwind 的款式，进而由 PostCSS 打包进理论我的项目中
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}"
],
theme: {extend: {},
},
plugins: [],}到这里 tailwindcss 的配置曾经实现，接下就须要把 tailwindcss 的款式利用到咱们的我的项目中去。
首先咱们先编辑 index.css
@tailwind base;
@tailwind components;
@tailwind utilities;而后关上 App.tsx 编辑，加上 tailwindcss 款式测试一下
import {Button} from 'antd'
import {CiCircleFilled} from '@ant-design/icons'
import './App.css'
function App() {
return (<div className='font-bold text-red-500 bg-[#ccc] h-screen w-screen'>
<Button type="primary" className='flex items-center'>
<CiCircleFilled size={16}/> Hello world!
</Button>
</div>
)
}
export default App此时咱们就能够看到 tailwindcss 款式 和 antd 组件都失效了。
如果款式未失效，请查看:
- tailwindcss.config.js 配置文件里的 content 是否配置了
- index.css 是否退出了 tailwindcss 的款式引入
- 在 main.tsx 中是否引入了 index.css
这一步骤 代码参考
3. 集成 Redux
接着下来，咱们把 Redux 状态治理集成到咱们的我的项目中。
pnpm add @reduxjs/toolkit react-redux这一步骤的代码参考
4. 集成 Jest 单元测试
# jest 测试框架
# @types/jest Jest 类型申明包 TS 申明类型包的大版本最好和 jest 一样。# ts-jest 转译器 利用 tsc 来转译 TypeScript
# ts-node 写完代码之后要用 tsc 作编译，之后再用 Node.js 来跑，这样比拟麻烦，所以咱们会用 ts-node 来间接跑 ts 代码，省去了编译阶段。# jest-environment-jsdom dom 操作
pnpm add -D jest @types/jest ts-jest ts-node jest-environment-jsdom @testing-library/react @testing-library/user-event @testing-library/jest-dom @types/testing-library__jest-dom identity-obj-proxy @testing-library/dom @types/node
# 初始化 jest 配置
npx jest --init接着咱们开始配置 jest.config.ts
// jest.config.ts
import type {Config} from 'jest'
const config: Config = {
bail: 0, // 有测试谬误后就进行谬误
// 多于一个测试文件运行时不展现每个测试用例测试通过状况
verbose: true,
// 测试用例运行在一个相似于浏览器的环境里，能够调用浏览器的 API
testEnvironment: 'jsdom',
// 转译下列模块为 Jest 能辨认的代码
preset: 'ts-jest',
moduleNameMapper: {
// 模块 alias 例如咱们在测试文件中导入文件 import xxx from '@/components/xxx' 其中 '@/components/xxx' 会对应到 <rootDir/src/components/xxx 模块。'^@/(.*)$': '<rootDir>/src/$1',
// identity-obj-proxy 会 mock 款式相干的
'\\.(css|less|sass|scss)$': 'identity-obj-proxy',
},
// 以 <rootDir>/src 这个目录做为根目录来搜寻测试文件（模块）roots: ['<rootDir>'],
// 在测试环境筹备好之后执行前的钩子函数，每个测试文件执行之前运行下述文件, 一些环境的兼容的代码咱们能够写在这里
setupFilesAfterEnv: ['<rootDir>/tests/jest.setup.ts'],
}
export default config扩大 Jest 的 expect API，以便在测试中应用 Jest DOM 的断言函数
tests/jest.setup.ts
import '@testing-library/jest-dom/extend-expect'既然咱们在 jest 配置了导入模块 alias。同样的咱们也须要在 typescript 的配置中退出相应的 alias, 要不然 typescript 不能解析 jest 的测试代码。
同时咱们在 tsconfig.json 中加上 jest 的 typescript 类型申明。批改如下：
{
"compilerOptions": {
// ...
"baseUrl": ".",
"paths": {"@/*": ["src/*"]
},
"types": ["vite/client", "jest", "@testing-library/jest-dom"]
},
// ...
}
并且还须要在 vite.config.ts 中加上相应的 alias 配置.
import path from 'path'
// ... 代码
export default defineConfig({
// ... 代码
resolve: {
alias: {'@': path.resolve(__dirname, '/src'),
}
}
// ... 代码
})
好了，当初 jest 基本上曾经配置实现了，咱们写个小例子来测试一下。示例代码
当初增加一个 React 组件的测试 示例代码
装置依赖如下：
pnpm add axios
pnpm add -D classnames msw5. 集成代码标准相干的工具 eslint stylelint prettier
pnpm add -D eslint prettier stylelint eslint-plugin-react@latest @typescript-eslint/eslint-plugin@latestes @typescript-eslint/parser lint-config-prettier eslint-plugin-prettier stylelint-config-prettier stylelint-config-standard stylelint-order配置 prettier 规定，在根目录下新建一个 .prettierrc.cjs 配置文件，内容如下：
module.exports = {
// 一行最多 120 字符..
printWidth: 80,
// 应用 2 个空格缩进
tabWidth: 2,
// 不应用缩进符，而应用空格
useTabs: false,
// 行尾须要有分号
semi: false,
// 应用单引号
singleQuote: true,
// 对象的 key 仅在必要时用引号
quoteProps: "as-needed",
// jsx 不应用单引号，而应用双引号
jsxSingleQuote: false,
// 开端不须要有逗号 none es5 all
trailingComma: "es5",
// 大括号内的首尾须要空格
bracketSpacing: true,
// jsx 标签的反尖括号须要换行
jsxBracketSameLine: false,
// 箭头函数，只有一个参数的时候，不须要括号 always avoid
arrowParens: "always",
// 每个文件格式化的范畴是文件的全部内容
rangeStart: 0,
rangeEnd: Infinity,
// 不须要写文件结尾的 @prettier
requirePragma: false,
// 不须要主动在文件结尾插入 @prettier
insertPragma: false,
// 应用默认的折行规范
proseWrap: "preserve",
// 依据显示款式决定 html 要不要折行
htmlWhitespaceSensitivity: "css",
// vue 文件中的 script 和 style 内不必缩进
vueIndentScriptAndStyle: false,
// 换行符应用 lf
endOfLine: "lf",
}再配置 eslint, 在根目录下创立 .eslintrc 配置文件，内容如下：
{
"env": {
"browser": true,
"es2021": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:@typescript-eslint/recommended",
"plugin:prettier/recommended"
],
"overrides": [],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module"
},
"plugins": [
"react",
"@typescript-eslint",
"prettier"
],
"settings": {
"react": {"version": "detect"}
},
"rules": {
"prettier/prettier": "error",
"arrow-body-style": "off",
"prefer-arrow-callback": "off"
}
}最初配置一个款式的规定，创立一个 .stylelintrc.json, 内容如下：
{
"extends": [
"stylelint-config-standard",
"stylelint-config-prettier"
],
"plugins": ["stylelint-order"]
}接下来在 package.json 的 script 中增加命令。
{
"script": {"lint": "eslint --ext .js,.jsx,.ts,.tsx --fix --quiet ./"}
}6. husky + commitlint +lint-staged
pnpm add -D husky lint-staged @commitlint/cli @commitlint/config-conventional在 package.json 增加 prepare 命令并运行
{
"script": {
// ...,
"prepare": "husky install"
}
}yarn prepare给 Husky 增加一个 Hook, 这样每次 git commit 之前都会先运行 npm run lint, 通过之后才会提交代码
npx husky add .husky/pre-commit "npm run lint"咱们能够通过 lint-staged 只对暂存区的代码进行测验。在级 package.json 增加一个 lint-staged 的配置
{
"lint-staged": {"*.{js,jsx,tsx,ts}": ["npm run lint"]
}
}并在 .husky/pre-commit 中替换 npx lint-staged。。当初咱们每次 git commit 前都会对改变的文件进行 Lint 查看了。
commitlint 配置
在根目录下创立配置文件 .commitlintrc.cjs
module.exports = {extends: ["@commitlint/config-conventional"]
}而后给 husky 增加一个 commit-msg hook,
npx husky add .husky/commit-msg "npx --no-install commitlint -e $HUSKY_GIT_PARAMS"当初提交信息不标准就会被拦挡导致提交失败，标准可见 commitlint，当然你也能够依据须要批改提交信息标准。
- 本文示例代码在 github
- 本文示例代码在 gitee
文档参考
- vitejs 中文官网文档
- TailwindCss 官网文档
- Redux 官网
- esbuild 中文官网文档
- swc 官网文档
- Jest 官网文档
- React Testing Library
- MSW – Mock Service Worker
- typescript-eslint