关于javascript:vitejs-typescript-react-项目搭建过程实践

本文记录了应用 vitejs, antd, react, redux 搭建我的项目过程，其它蕴含了集成 jest 单元测试，tailwindcss 应用，eslint 代码格式化以及 git 代码提交规范化等性能。

咱们应用 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

这一步骤代码参考

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

这一步骤代码参考

接着下来，咱们把 Redux 状态治理集成到咱们的我的项目中。

pnpm add @reduxjs/toolkit react-redux

这一步骤的代码参考

# 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 msw

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 ./"}
}

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 查看了。

在根目录下创立配置文件 .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

关于javascript:vitejs-typescript-react-项目搭建过程实践

1. 初始化我的项目

2 集成 antd 与 tailwindcss

3. 集成 Redux

4. 集成 Jest 单元测试

5. 集成代码标准相干的工具 eslint stylelint prettier

6. husky + commitlint +lint-staged

commitlint 配置

文档参考