Vue3初探之基于rollup打包发版至npm

最新推荐文章于 2025-11-08 01:58:20 发布

原创

最新推荐文章于 2025-11-08 01:58:20 发布 · 2.3k 阅读

5 ·

CC 4.0 BY-SA版权

本文介绍如何使用Rollup构建Vue3+TypeScript的UI框架，包括配置Rollup、执行打包命令及发布流程。

第一步：
在lib文件下创建index.ts文件；导出所有的组件为组件名

export {
   
    default as Switch } from './Switch.vue'
export {
   
    default as Button } from './Button.vue'

第二步：
创建rollup.config.js在根目录下

import esbuild from 'rollup-plugin-esbuild' // plugin-esbuild将ts变为js
import vue from 'rollup-plugin-vue' // plugin-vue将vue结尾的文件变为js
import scss from 'rollup-plugin-scss' // plugin-scss将scss结尾的变为js
import dartSass from 'sass'; // 用于支持插件
import {
   
    terser } from "rollup-plugin-terser" // 变丑别人看不懂