使用vite和tailwindcss开发你的组件库
使用vite和tailwindcss开发你的组件库
前言
演示视频
https://www.bilibili.com/video/BV1EST3zPEyP/?spm_id_from=333.1387.homepage.video_card.click
参考
https://juejin.cn/post/7112295067682865166
https://juejin.cn/post/7046187185615142949
代码仓库
https://gitee.com/malguy/vite-components-lib-tutorial
初始化项目
创建vite
直接使用命令行
1
2
3
| pnpm create vite react-components
cd react-components
pnpm i
|
你也可以用我的脚手架面板(推销一下😁🤓)
malred/cli-panel
无需联网, 因为是用文件复制的方法创建的
安装tailwind
使用tailwind v3
Installation - Tailwind CSS
1
2
3
| pnpm install -D tailwindcss@3 postcss autoprefixer
# npx tailwindcss init -p
pnpm dlx tailwindcss@3 init -p
|
将路径添加到
**<font style="color:rgb(15, 23, 42);">tailwind.config.js</font>**
文件中的所有模板文件中。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
"./src/**/*.{vue,js,ts,jsx,tsx}",
"./src/**/*.{svelte,js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
|
将Tailwind每个层的
**<font style="color:rgb(15, 23, 42);">@tailwind</font>** 指令添加到您的
**<font style="color:rgb(15, 23, 42);">./src/app.css</font>** 文件中。
1
2
3
| @tailwind base;
@tailwind components;
@tailwind utilities;
|
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
|
import './button.css'
import * as React from "react";
interface
Props
{
size: 'lg' | 'md' | 'sm'
children: string | React.ReactNode
}
const Button = ({
size, children
}: Props) => {
const className = size + " base "
return (
<button
className={className}
>
{children}
</button>
);
};
export default Button;
|
如果觉得tailwind样式太长, 可以写一个css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| button {
&.base {
@apply text-white bg-blue-500 rounded-md
}
&.sm {
@apply text-xs p-2
}
&.md {
@apply text-sm p-4
}
&.lg {
@apply text-lg p-8
}
}
|
在index.js中导出
1
2
3
4
5
6
7
8
9
|
import './index.css'
import './App.css'
import Button from "./components/button/index.jsx";
export {
Button as MalButton
}
|
修改vite配置文件
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
| import {defineConfig} from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'
const resolvePath = (str) => path.resolve(__dirname, str);
export default defineConfig({
plugins: [react()],
cssTarget: 'chrome61',
resolve: {
alias: {
"@": path.resolve(__dirname, "./src"),
},
},
build: {
rollupOptions: {
external: ["react", "react-dom"],
output: {
globals: {
react: "react",
"react-dom": "react-dom",
},
},
},
lib: {
entry: resolvePath("src/index.js"),
name: "mal-react-components",
fileName: format => `mal-react-components.${format}.js`,
},
}
})
|
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
| import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [vue()],
build: {
rollupOptions: {
external: ['vue'],
output: {
globals: {
vue: 'Vue',
},
},
},
lib: {
entry: './src/index.js',
name: 'mal-vue-components',
fileName: (format) => `mal-vue3-components.${format}.js`,
},
}
})
|
如果使用的是ts
1
2
3
| pnpm i @rollup/plugin-typescript tslib
# 在vite.config文件里使用node的依赖需要安装
pnpm i @types/node --save-dev
|
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
| import {defineConfig} from 'vite'
import react from '@vitejs/plugin-react'
import typescript from '@rollup/plugin-typescript'
import {resolve} from "node:path";
const resolvePath = (str: string) => resolve(__dirname, str);
export default defineConfig({
plugins: [react()],
resolve: {
alias: {
"@": resolve(__dirname, "./src"),
},
},
build: {
rollupOptions: {
external: ["react", "react-dom"],
output: {
globals: {
react: "react",
"react-dom": "react-dom",
},
},
plugins: [
typescript({
target: "es2015",
rootDir: resolvePath("src/"),
declaration: true,
declarationDir: resolvePath("dist"),
exclude: resolvePath("node_modules/**"),
allowSyntheticDefaultImports: true,
}),
],
},
lib: {
entry: resolvePath("src/index.ts"),
name: "mal-react-components",
fileName: format => `mal-react-components.${format}.js`,
},
},
})
|
打包 发布
使用
在本地想测试, 可以用
1
2
3
4
| # 在库的目录执行
npm link
# 在要使用的目录中执行
npm link [自己写的库的名称]
|
但是我之前试了老是失败, 我的解决方法是直接复制打包后的文件到项目中, 然后从其中引入依赖
