使用Vite库模式打包一个Vue组件

介绍

学习本篇文章会带领大家使用Vite库模式来打包一个Vue组件。

首先先介绍下Vite这款工具：它是一款前端构建工具。可帮助前端开发人员提供高效开发体验的开发工具，也基于Rollup提供打包功能的打包工具。 选择Vite就是为了一个字 快。

而选择Vite做打包最开始想法就是必须得开发调试舒服，而结果就是让你舒服到极致~~

接下来我就从0开始一步一步记录如何去打包一个Vue组件。

理清思路

平时开发中如果我们需要引入一个Vue组件包，普遍都是如下引入：

<script setup>
    // 引入组件、组件样式
    import { XxComponent } from 'xx-xxx'
    import 'xx-xxx/dist/xxStyle.css'


    // 第一种注册为全局组件
    app.use(XxComponent)
    
    // 第二种就直接在需要的地方引入组件，直接使用
</script>

<template>
    <XxComponent />
</template>

那我们想做的也同样是这种效果，接下来就开干。

搭建基础项目

本文章使用 pnpm 包管理器原因就在于它提供了 workspace 这一功能以及高效的包链接。

使用 pnpm creat vite 来创建项目，输入项目名 compoent-lib-template，选择 vanila + ts 模式。

删除一些不要的文件，之后整理项目结构目录如下：

然后整个项目的分为两个模式。一个 core 模块就是组件的源码实现，一个 example 模块就是开发调试的地方。

文件 pnpm-workspace.yaml 并且输入一下内容

packages:
  - 'core/**'
  - 'example/**'

在当前目录创建一个 vue + ts 工程，同时也可删除一些没必要的文件，之后整理项目结构目录如下：

• pnpm create vite example

安装依赖和配置文件

在根目录下安装项目依赖 vue、vue-tsc、@vitejs/plugin-vue、vite-plugin-dts

• pnpm install vue -w

• pnpm install @vitejs/plugin-vue vue-tsc vite-plugin-dts -D -w

vite.config.ts

使用库模式打包，入口文件选择 core/index.ts

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

export default defineConfig({
  build: {
    lib: {
      entry: resolve(__dirname, './core/index.ts'),
      name: 'Bundle',
      fileName: 'bundle'
    },
    rollupOptions: {
      external: ['vue'],
      output: {
        globals: {
          vue: 'Vue'
        }
      }
    }
  },
  plugins: [vue(), dts({ include: './core' })]
})

接下来就简单的在core文件夹中写一个 MyButton 组件，并且在 index.ts 中引入和导出

<template>
  <button class="lib-custom-button">{{ label }}</button>
</template>

<script lang="ts" setup>
export interface MyButtonProps {
  label: string;
}

withDefaults(defineProps<MyButtonProps>(), {
  label: "默认按钮",
});
</script>

import { App } from "vue";
import MyButton from "./MyButton.vue";

export { MyButton };

export default {
  install(app: App) {
    app.component("MyButton", MyButton);
  },
};

同时添加声明文件 vite-env.d.ts ，处理引入 .vue 文件爆红问题，需要确保包含在 tsconfig.json 的include

/// <reference types="vite/client" />

declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}

测试打包

运行 pnpm run build 进行库打包。在这一步基本上就可以完成组件的打包，目录如下：

当然，作为一个NPM包，packages.json 一些字段也是需要去编写的，如下：

最主要的还是标注新增的四个字段，其他的字段可以参考其他的开源项目，在NPM包准备发布时去完善起来。

{
  "name": "compoent-lib-template",
  "private": false, // 修改为false
  "version": "0.0.0",
  "type": "module",
  "main": "./dist/bundle.js", // 新增
  "module": "./dist/bundle.js", // 新增
  "types": "./dist/index.d.ts", // 新增
   "files": [ // 新增
    "dist"
  ],
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^3.0.0",
    "typescript": "^4.6.4",
    "vite": "^3.0.0",
    "vite-plugin-dts": "^1.4.0",
    "vue-tsc": "^0.38.4"
  },
  "dependencies": {
    "vue": "^3.2.37"
  }
}

开发调试

开发调试，最重要的就是开发体验。如果开发的时候每改一步组件源码就要去打包一次，那非常影响自己的效率。

我们在 core 目录下进行包初始化 pnpm init 包命名为： @lib/core，把这个项目当做一个 monoreop 即可。在 example 依赖此包 pnpm install @lib/core。

添加根目录 package.json 脚本命令 pnpm -C example run dev

"scripts": {
    "dev:example": "npm -C example run dev", // example打包开发调试使用
    "build": "vue-tsc --noEmit && vite build", //  组件打包
    "preview": "npm -C example run build && npm -C example run preview" // example打包
},

在 example/main.ts 中引入 @lib/core 全局注册

import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";
import MyButton from "@lib/core"; // 新增

const app = createApp(App); 
app.use(MyButton); // 新增
app.mount("#app");

在 App.vue 中使用组件

<template>
  <MyButton></MyButton>
  <MyButton label="全局按钮"></MyButton>
</template>

之后如果修改组件代码，页面跟着也会改动，非常提高开发效率。

如果想要测试打包后的组件，就可以在 example 中安装 pnpm install compoent-lib-template 根目录的包是直接指向打包后的文件。 打包后的引入方式就和平常使用其他组件插件一样，只是多了一个引入样式文件。

最后

如果对文章有疑问的问题也可以积极提出来，毕竟文章所有内容都是一步一步记录出来的，可能有些地方讲解有误可以提出来。

另外我提供了一个库模板可以参考着使用：组件模板

个人的开源项目，有感兴趣的也可以看看。蟹蟹。

1. VAdmire Plus

2. @flypeng/tool