使用 vite 打包 vue 组件库

有没有想过封装 vue 组件?本文主要参考官网的库模式

组件库项目

创建项目

创建项目文件夹,比如 ui，然后进入文件夹。

mkdir ui
cd ui

初始化 npm 配置

npm init -y

安装依赖

npm i vue vite typescript @vitejs/plugin-vue @types/node -D

初始化 typescript 配置

npx tsc --init

在 ui 文件夹下 新建 vite.config.ts

import { resolve } from 'path'
import { defineConfig } from 'vite'
import vue from "@vitejs/plugin-vue";

export default defineConfig({
  plugins: [vue()],
  build: {
    lib: {
      entry: resolve(__dirname, 'lib/main.js'),
      name: 'UI',
      // the proper extensions will be added
      fileName: 'ui'
    },
    rollupOptions: {
      // 确保外部化处理那些你不想打包进库的依赖
      external: ['vue'],
      output: {
        // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
        globals: {
          vue: 'Vue'
        }
      }
    }
  }
})

引入了 @vitejs/plugin-vue 插件

编写组件

// HelloWorld.vue
<template>
    <span>hello world!</span>
</template>
<script lang="ts">
export default{
    name:'HelloWorld'
}
</script>

// MyButton.vue
<template>
  <button>
    <slot></slot>
  </button>
</template>
<script lang="ts">
export default {
  name: "MyButton",
  created(){
    console.log("hello button!")
  }
};
</script>
<style>
button {
  color: blue;
}
</style>

以上两个文件在 src 目录下编写。

创建 lib/main.js 文件

import HelloWorld from "../src/HelloWorld.vue";
import MyButton from "../src/MyButton.vue";
export { MyButton, HelloWorld };

vite编译

npx vite build

如果打包成功，产物在 dist 目录下。

npm 打包

修改打包配置

{
  "name": "ui",
  "type": "module",
  "files": ["dist"],
  "main": "./dist/ui.umd.cjs",
  "module": "./dist/ui.js",
  "exports": {
    ".": {
      "import": "./dist/ui.js",
      "require": "./dist/ui.umd.cjs"
    }
  }
}

运行打包命令

npm pack

成功打包之后，跟目录下会生成 ui-1.0.0.tgz 文件。

使用打包的组件

创建 vue3 项目,和前面的 ui 同级。详细参考 vite官网

安装组件项目

npm i ..\ui\ui-1.0.0.tgz -S

接着，可以直接替换 APP.vue 来检查验证一下效果

<script setup lang="ts">
import { MyButton, HelloWorld } from "ui";
import '../node_modules/ui/dist/style.css'
</script>

<template>
  <div>
    <MyButton>
      <HelloWorld />
    </MyButton>
  </div>
</template>

运行项目既可以看到效果。

可以清空 src 目录下的 style.css 文件里内的内容，方便观察。

问题

打包后的组件没有类型推断。

无法通过 ui/dist/style.css 引入 css 。