Vite+React项目基础配置

项目初始化

pnpm create vite

配置ESlint + Prettier

Vscode 安装扩展插件 Prettier ESLint
根据插件使用文档安装相关依赖包

yarn add -D prettier@^2.5.1 eslint@^8.7.0 @typescript-eslint/parser@^5.0.1 typescript@^4.4.4

将该插件设置成默认格式
在项目中配置setting.json 文件，直接使用官方提供的即可

{
  "editor.defaultFormatter": "rvest.vs-code-prettier-eslint",//指定默认格式插件
  "editor.formatOnSave": true, // 保存自动格式化
}

添加eslint配置文件，同时在文件指定parser 自动格式化才能生效

文件名： .eslintrc

{
  // //ESLint默认使用Espree作为其解析器
  // //同时babel-eslint也是用得最多的解析器
  "parser": "@typescript-eslint/parser",
  // //ESLint支持使用第三方插件
  // //在使用插件之前，你必须使用npm安装它
  // //全局安装的ESLint只能使用全局安装的插件
  // //本地安装的ESLint不仅可以使用本地安装的插件还可以使用全局安装的插件
  // //plugin与extend的区别：extend提供的是eslint现有规则的一系列预设
  // //而plugin则提供了除预设之外的自定义规则，当你在eslint的规则里找不到合适的的时候
  "plugins": [],
  // //就可以借用插件来实现了
  // //off或0--关闭规则
  // //warn或1--开启规则，警告级别(不会导致程序退出)
  // //error或2--开启规则，错误级别(当被触发的时候，程序会退出)
  "rules": {}
}

配置 husky + lint-staged

Husky - Git hooks

项目安装husky

 npm install husky --save-dev

在git hooks 钩子启用的时候自动安装，执行添加该命令，添加配置

npm pkg set scripts.prepare="husky install"

添加一个git hook钩子，该命令表示：添加commit之前执行lint-staged

npx husky add .husky/pre-commit "lint-staged"

安装lint-staged

npm i lint-staged --save-dev

在package.json 文件中添加配置

 "lint-staged": {
    "src/**/*.{ts,tsx,js}": [
      "eslint --fix",
    ],
    "**/*": [
      "prettier --write --ignore-unknown",
    ]
  }

问题记录

执行报错： The '.husky/pre-commit' hook was ignored because it's not set as executable.

chmod +x .husky/pre-commit

配置CSS Module

vite.config.ts 添加配置


 css: {
      modules: {
        localsConvention: "camelCase",
        generateScopedName: "doris_[local]_[hash:base64:5]",
      },
    },

配置css module智能提示

安装插件


yarn add typescript-plugin-css-modules --dev

tsconfig.json 添加配置


"plugins": [ { "name": "typescript-plugin-css-modules"}]

问题记录如果智能提示不生效，需要注意当前typescript生效的版本使用的当前工作区，还是vscode本身。

解决方案：

选择工作的版本
在全局的typeScript插件中安装 typescript-plugin-css-modules

定义全局的CSS变量

vite.config.json配置全局css文件

css: {
      preprocessorOptions: {
        scss: {
          additionalData: `@import "./src/assets/css/global.scss";`
        }
      },
    },

2. 文件目录：src/assets/css/global.scss ，定义全局使用的样式变量

Q: 微前端场景下, 子应用CSS样式相互影响解决方案

解决方案: 增加 css 样式前缀

vite.config.ts 配置

 css: {
      preprocessorOptions: {
        less: {
          modifyVars: {
            prefixCls: "XXX", // 名称前缀
          },
          javascriptEnabled: true,
        },
      },
    },

业务组件添加 ConfigProvider ,更新组件class 的前缀名 (不同组件库提供的provider可能是不一样的)

Q: vite 打包出现global is not defined 报错

  optimizeDeps: {
      esbuildOptions: {
        define: {
          global: "globalThis",
        },
      },
    }