Vite工程化配置

本文最后更新于：2024年4月25日 上午

安装与使用

1
pnpm i vite -g
1
pnpm create vite

基础配置

路径别名

设置路径别名可以方便的导入文件

vite.config.ts 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { defineConfig } from 'vite'
import { resolve } from 'path'
// other......

// https://vitejs.dev/config/
export default defineConfig({
  // other......
  resolve: {
    alias: {
      // resolve(__dirname, 'src') -> F:\template\react18-ts\src
      '@': resolve(__dirname, 'src'),
    },
  },
})

若使用TS还需要在开发环境安装@types/node,并配置tsconfig.json

tsconfig.json 

1
2
3
4
5
6
7
8
9
10
11
12
{
  "compilerOptions": {
    // other......
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "src/*"
      ]
    }
  },
  // other......
}

端口号与代理

CSS

scss

windicss

安装

安装windicss与vite插件

1
pnpm i windicss vite-plugin-windicss -D

vite.config.ts 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import WindiCSS from 'vite-plugin-windicss'
import { resolve } from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), WindiCSS()],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'),
    },
  },
})

src/main.tsx 

1
2
import 'virtual:windi.css'
// ...

入口文件导入'virtual:windi.css'后就可使用了

配置项

新建windi.config.ts

windi.config.ts 

1
2
3
import { defineConfig } from 'windicss/helpers'

export default defineConfig({})

☘️attributify

1
2
3
4
5
export default defineConfig({
  attributify: {
    prefix: 'w-'
  },
})

这样配置后使用时会有TS类型报错,需要添加类型声明，其他框架可以看issue

#322 windicss/windicss (github.com)

src/types/shims.d.ts 

1
2
3
4
5
6
7
8
9
import { AttributifyNames } from 'windicss/types/jsx'

declare module 'react' {
  type Prefix = 'w-'

  // eslint-disable-next-line @typescript-eslint/no-empty-interface, @typescript-eslint/no-unused-vars
  interface HTMLAttributes<T> extends Partial<Record<AttributifyNames<Prefix>, string>> {}
}

使用Eslint

postcss

Lint

Eslint

eslintrc.cjs. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
module.exports = {
  // ...
  rules: {
    'react/react-in-jsx-scope': 'off',
    'react/no-unknown-property': [
      'error',
      {
        ignore: [...windiAttributify('w-')],
      },
    ],
  },
}

/**
 * @desc windicss 属性
 * @param {string} prefix windicss 属性前缀
 */
function windiAttributify(prefix = '') {
  const UtilityNames = [
    'p',
    'm',
    'w',
    'h',
    'z',
    'border',
    'grid',
    'flex',
    'bg',
    'text',
    'font',
    'opacity',
    'animate',
    'transition',
    'transform',
    'align',
    'justify',
    'items',
    'block',
    'content',
    'pos',
    'box',
    'overflow',
    'underline',
    'list',
    'gradient',
    'divide',
    'gap',
    'ring',
    'icon',
    'container',
    'space',
    'table',
    'order',
    'place',
    'display',
    'shadow',
    'blend',
    'filter',
    'backdrop',
    'cursor',
    'outline',
    'select',
  ]
  const VariantNames = [
    'hover',
    'active',
    'focus',
    'enabled',
    'dark',
    'light',
    'sm',
    'lg',
    'md',
    'xl',
    'xxl',
    'first',
    'last',
    'child',
    'root',
    'before',
    'after',
    'all',
  ]
  const windiIgnore = [
    ...UtilityNames.map((name) => `${prefix}${name}`),
    ...VariantNames.map((name) => `${prefix}${name}`),
  ]

  UtilityNames.forEach((utility) => {
    VariantNames.forEach((variant) => {
      windiIgnore.push(`${prefix}${utility}:${variant}`)
    })
  })

  return windiIgnore
}

Prettier

Stylelint

Husky

Commitlint

gitmoji

CI/CD

前端工具 > Vite
#Vite
Vite工程化配置
https://qingshaner.com/Vite工程化配置/
作者
清山
发布于
2022年11月20日
许可协议