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

#使用Vite库模式打包一个Vue组件| 来源: 网络整理| 查看: 265

介绍

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

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

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

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

理清思路

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

// 引入组件、组件样式 import { XxComponent } from 'xx-xxx' import 'xx-xxx/dist/xxStyle.css' // 第一种注册为全局组件 app.use(XxComponent) // 第二种就直接在需要的地方引入组件，直接使用复制代码

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

搭建基础项目

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

使用 pnpm create 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 中引入和导出

{{ label }} export interface MyButtonProps { label: string; } withDefaults(defineProps(), { label: "默认按钮", }); 复制代码 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

/// declare module '*.vue' { import type { DefineComponent } from 'vue' const component: DefineComponent 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 中使用组件

复制代码

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

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

最后

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

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

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

VAdmire Plus

@flypeng/tool

【本文地址】

公司简介

联系我们