Vite工程化配置

本文最后更新于:2022年11月28日 晚上

安装与使用

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工程化配置
https://qingshaner.com/Vite工程化配置/
作者
清山
发布于
2022年11月20日
许可协议