【技术/前端】基于vite的工程化

1.vite创建

我的技术栈是react，因此创建项目时有2种选择：

1.使用create-react-app创建
2.基于vite创建,目前4.4版本(2024.04.07) 推荐使用基于vite创建，因为vite是基于浏览器 es module import 实现的编译服务，而CRA底层是基于webpack编译打包，多了打包环节，开发时界面响应速度就慢，具体可参考vite实现原理

在创建时推荐使用pnpm包管理工具，具体原因在这，创建命令是: pnpm create vite my-react-app --template react-ts ，该模版来自这里

2.代码质量工具

eslint侧重检查js语法错误，prettier侧重格式化代码样式，stylelint侧重css代码检查

1.首先初始化eslint，会生成.eslintrc.cjs 配置文件：

pnpm init @eslint/config

可以看到生成的配置文件继承了 "eslint:recommended", "plugin:react/recommended", "plugin:@typescript-eslint/recommended" ，如果需要配置 lint 规则可以在 rules 中添加。

2.接着来安装prettier：

pnpm i prettier -D

然后在根目录创建 .prettierrc.js 配置文件

js 复制代码

module.exports = {
  printWidth: 80,
  tabWidth: 2,
  useTabs: false,
  singleQuote: true,
  semi: false,
  trailingComma: "none",
  bracketSpacing: true
}

3.接下来在 ESLint 中引入 Prettier，安装相关依赖：

pnpm i eslint-config-prettier eslint-plugin-prettier -D

然后更改 Eslint 的配置文件 .eslintrc.cjs 在里面加入 Prettier 相关配置。具体含义在这

js 复制代码

module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended",
        "plugin:@typescript-eslint/recommended",
       "plugin:prettier/recommended"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "react",
        "@typescript-eslint",
      "prettier"
    ],
    "rules": {
       "prettier/prettier": "error",
      "arrow-body-style": "off",
       "prefer-arrow-callback": "off"
    }
}

4.接下来在 package.json 的 script 中添加命令：

json 复制代码

{
    "script": {
        "lint": "eslint --ext .js,.jsx,.ts,.tsx --fix --quiet ./"
    }
}

5.运行命令进行测试时会报错：

pnpm run lint

原因是没有引入 React，在 React17 中已经不需要为 JSX 显示引入 React 了，按提示改下 .eslintrc.cjs。

js 复制代码

module.exports = {
  extends: [
    // ...
    'plugin:react/jsx-runtime'
  ],
  //...
  settings: {
    react: {
      version: 'detect'
    }
  }
}

再运行就没有报错了，可以看到 ESLint 已经生效，对 App.tsx 进行了修复。

6.在 Vite 中引入 ESLint 插件，以便在开发阶段发现问题。 pnpm i vite-plugin-eslint -D

然后在 vite.config.ts 引入插件

ts 复制代码

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import viteEslint from 'vite-plugin-eslint'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    viteEslint({
      failOnError: true
    })
  ]
})

现在就可以在运行时的控制台看到 ESLint 报错了。

7.添加 stylelint 检查 css 代码首先安装依赖：pnpm i stylelint stylelint-config-standard stylelint-prettier stylelint-config-prettier stylelint-order stylelint-config-rational-orde stylelint-declaration-block-no-ignored-properties -D

接着新增stylelint.config.js文件：

js 复制代码

module.exports = {
  extends: [
    // 标准配置
    'stylelint-config-standard',
    // 用于排序
    'stylelint-config-rational-order',
    // 放在最后
    'stylelint-prettier/recommended',
  ],
  plugins: [
    // 提示书写矛盾的样式
    'stylelint-declaration-block-no-ignored-properties',
  ],
  rules: {
    'plugin/declaration-block-no-ignored-properties': true,
    'prettier/prettier': true,
    'rule-empty-line-before': [
      'always',
      {
        // 防止和 prettier 冲突
        except: ['first-nested'],
      },
    ],
    'selector-pseudo-class-no-unknown': [
      true,
      {
        ignorePseudoClasses: ['global'],
      },
    ],
  },
  // stylelint 支持直接配置忽略文件
  ignoreFiles: ['node_modules/**/*', 'dist/**/*', 'public/**/*'],
}

下载vite运行时插件：pnpm i @amatlash/vite-plugin-stylelint -D

加入vite.config.ts中：

ts 复制代码

import { defineConfig } from 'vite'
import path from 'path'
import eslintPlugin from 'vite-plugin-eslint'
import viteStylelint from '@amatlash/vite-plugin-stylelint'
import reactRefresh from '@vitejs/plugin-react-refresh'

function resolve(relativePath: string) {
  return path.resolve(__dirname, relativePath)
}

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    reactRefresh(),
    eslintPlugin({
      fix: true,
      include: ['./src/**/*.[tj]s?(x)'],
    }),
    viteStylelint({
      include: './src/**/*.(less|scss|css)',
    }),
  ],
  resolve: {
    alias: {
      '@': resolve('./src'),
    },
  },
})

3.提交规范

在提交前需要对代码自动进行检查，

1.通过 Husky 在 Git commit 时进行代码校验。

先安装依赖: pnpm i husky -D

然后在 package.json 中添加脚本 prepare 并运行

shell 复制代码

pnpm pkg set scripts.prepare="husky install"

pnpm run prepare

运行命令后会在项目根目录创建 .husky 文件夹，现在给 Husky 添加一个 Hook

shell 复制代码

pnpx husky add .husky/pre-commit "npm run lint"

添加 hook 之后，每次 git commit 之前都会先运行 npm run lint，通过之后才会提交代码

通过 lint-staged 只对暂存区的代码进行检验。

首先安装依赖: pnpm i lint-staged -D

然后在 package.json 添加相关配置:

json 复制代码

{
  "lint-staged": {
    "*.{js,jsx,tsx,ts}": [
      "pnpm run lint"
    ]
  }
}

并在 .husky/pre-commit 中替换 npm run lint 为 pnpx lint-staged。现在每次提交代码前都会对改动的文件进行 Lint 检查

使用 commitlint 对提交信息进行校验。先安装依赖：pnpm i @commitlint/cli @commitlint/config-conventional -D

然后在根目录创建配置文件 .commitlintrc.cjs

js 复制代码

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

然后把 commitlint 命令也添加 Husky Hook。运行命令：pnpx husky add .husky/commit-msg "npx --no-install commitlint -e $HUSKY_GIT_PARAMS"

现在提交信息不合法就会被拦截导致提交失败，规范可见 commitlint ，也可以根据需要修改提交信息规范。

4.vscode设置

通过editorconfig实现在不同的开发环境中遵循同一套代码格式标准

ini 复制代码

# https://editorconfig.org
root = tue

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true