基于 Vite 的组件库工程化实战

vite搭建开发环境#

包管理工具#

pnpm优势
1. 优秀的管理机制，安装依赖迅速且节省空间当使用npm或者yarn时，多个项目依赖同一个包，每个项目都会创建一次，而pnpm，依赖项将存储在一个内容可寻址的仓库中，所有文件都会从同一位置创建硬链接，不会占用额外的磁盘空间，允许跨项目共享同一版本依赖。
2. pnpm拥有良好的workspace功能可以很好完成monorepo风格的项目管理 pnpm内置了对monorepo的支持，只需在工作空间的根目录创建pnpm-workspace.yaml和.npmrc配置文件，同时还支持多种配置，相比较lerna和yarn workspace，pnpm解决monorepo的同时，也解决了传统方案引入的问题。
项目搭建步骤
1. 使用pnpm初始化项目
```
1
pnpm init
```
1. 安装vite作为开发工具
```
1
pnpm i vite@3.0.7 -D
```
1. 创建index.html用于测试

开发Vue组件#

安装vue3.0
```
1
pnpm i vue@3.2.37
```
创建index.ts，并在index.html中引入
创建button/index.tsx用于创建button组件

vue3.0默认不支持模板编译，所以不能使用template语法，需要安装plugin-vue插件以支持单文件组件的编译

安装vite的vue插件
```
1
pnpm i @vitejs/plugin-vue -D
```

添加vite.config.ts，配置plugin

1
import { defineConfig } from "vite";
2
import vue from "@vitejs/plugin-vue";
3

4
// https://vitejs.dev/config/
5

6
export default defineConfig({
7
  plugins: [vue()],
8
});

创建vue组件测试引用时如果不添加模块类型定义，会导致引入vue组件时报错

1
declare module "*.vue" {
2
 import { DefineComponent } from "vue";
3
 const component: DefineComponent<{}, {}, any>;
4
 export default component;
5
}

JSX组件#

想要支持JSX语法，就必须通过babel转义工具的支持

安装插件

1
pnpm i @vitejs/plugin-vue-jsx@"2.0.0" -D

配置vite.config.ts，添加plugins的JSX插件

直接使用jsx语法会报错，找不到名称“React”，这是不支持JSX语法造成的，而不是需要安装React，只需要配置tsconfig.json对jsx语法的支持

1
{
2
  "compilerOptions": {
3
    "declaration": true /* 生成相关的 '.d.ts' 文件。 */,
4
    "declarationDir": "./dist/types" /* '.d.ts' 文件输出目录 */,
5
    "jsx": "preserve"
6
  },
7
  "include": ["./**/*.*", "./shims-vue.d.ts"],
8
  "exclude": ["node_modules"],
9
  "esModuleInterop": true,
10
  "allowSyntheticDefaultImports": "true"
11
}

库文件封装#

一般像Element这种组件库都支持两种方式引入组件

完整引入，以vue插件的形式

1
import Element from 'element-ui'
2

3
// 完整引入
4
Vue.use(Element)
5

6
import {
7
  Select,
8
  Button
9
  // ...
10

11
} from 'element-ui'
12

13
// 按需引入
14
Vue.component(Select.name, Select)

按需引入，导出单个文件，使用vue.component注册

所以组件库需要包含两个要求：

默认导出为Vue插件
每个组件可以单独导出

封装过程#

设计入口

导出全部组件
实现一个Vue插件，插件种编写install方法，将所有组件安装到vue实例中

1
import { App } from 'vue';
2
import MyButton from './button';
3
import SFCButton from './button/SFCButton.vue';
4
import JSXButton from './button/JSXButton';
5
// 导出单独组件 以支持按需引入
6
export { MyButton, SFCButton, JSXButton }
7

8
// 编写一个插件，实现一个install方法
9
export default {
10
  install(app: App): void {
11
    app.component(MyButton.name, MyButton);
12
    app.component(SFCButton.name, SFCButton);
13
    app.component(JSXButton.name, JSXButton);
14
  }
15
}

配置vite.config.ts，以支持库文件的封装

1
 const rollupOptions = {
2

3
   external: ["vue", "vue-router"],
4
   output: {
5
     globals: {
6
       vue: "Vue",
7
     },
8
   },
9

10
 };
11

12
 export default defineConfig({
13

14
   .....
15

16
   // 添加库模式配置
17

18
   build: {
19
     rollupOptions,
20
     minify:false,
21
     lib: {
22
       entry: "./src/entry.ts",
23
       name: "SmartyUI",
24
       fileName: "smarty-ui",
25
       // 导出模块格式
26
       formats: ["esm", "umd","iife"],
27
     },
28
   },
29
 });

package.json中添加build命令，打包库文件
引入在demo文件中进行测试

音乐

音乐