Vite打包组件库

动机

去年使用vue3 + TSX封装组件,结果卡在了打包上,直到最近发现,vite提供了tsx的打包插件。

组件准备

手把手创建Vue3组件库

packages/index.ts中引入相关的组件、工具库、样式。

Vite配置

// bin/build.js
// node包,commonjs规范
const path = require('path')
const { defineConfig, build } = require('vite')
const vue = require('@vitejs/plugin-vue') 
const vueJsx = require('@vitejs/plugin-vue-jsx')

// 打包的入口文件
const entryDir = path.resolve(__dirname, '../packages')
// 出口文件夹
const outDir = path.resolve(__dirname, '../lib')
// vite基础配置
const baseConfig = defineConfig({
  configFile: false,
  publicDir: false,
  plugins: [vue(), vueJsx()]
})
// rollup配置
const rollupOptions = {
  // 确保外部化处理那些你不想打包进库的依赖
  external: [
    'vue'
  ],
  output: {
    // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
    global: [
      vue: 'Vue'
    ]
  }
}
// 全量打包构建
const buildAll = async () => {
  await build({
    ...baseConfig,
    build: {
      rollupOptions,
      lib: {
        entry: path.resolve(entryDir, 'index.ts'),
        name: '', // umd的变量名
        fileName: (format) => `index.${format}.js`, // 输出文件名
        formats: ['es', 'umd'],
      },
      outDir
    }
  })
}
const build = async () => {
  await buildAll()
}
build()

pkg#scripts

"scripts": {
  "build:lib": "node ./bin/build.js"
}

声明组件模块

防止typescript中引入module报错
// packages/vue.d.ts
declare module '*.vue' {
  import { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}

1.2k 声望
71 粉丝
0 条评论
推荐阅读
EIP1559与传统Gas定价模型转账逻辑
传统的gas定价模型(Txn Type===0) {代码...} 伦敦硬分叉EIP1559(Txn Type===2) {代码...} 外部签名 {代码...}

米花儿团儿阅读 427

SegmentFault 思否技术周刊 Vol.80 — 玩转新时代前端构建工具
Vite 提供了一套原生 ESM 的 HMR API。 具有 HMR 功能的框架可以利用该 API 提供即时、准确的更新,而无需重新加载页面或清除应用程序状态。Vite 内置了 HMR 到 Vue.js 单文件组件(SFC)和 React Fast Refresh 中。

Beverly5阅读 1.3k

封面图
React为什么不将Vite作为默认推荐?
CRA推出于2016年,彼时还没有成体系的React脚手架工具供大家使用,再加上这是官方工具,一经推出就受到了欢迎。截止当前,CRA仓库已经收获快10wstar。

卡颂4阅读 1.2k

封面图
[译]Vue官方成员:Vite生态发展的怎么样了
不幸的是,那时候 Vite 有坑,热更新做的也不如传统 webpack 项目,经常需要改一行代码就刷新一下浏览器。所以我趁项目还没变的很庞大之前改用 vue-cli 重构了该项目。但之后看见许多新出现的开源项目都用的 Vite...

手撕红黑树3阅读 6.9k

Vue3源码-整体渲染流程浅析
本文基于Vue 3.2.30版本源码进行分析为了增加可读性,会对源码进行删减、调整顺序、改变部分分支条件的操作,文中所有源码均可视作为伪代码由于ts版本代码携带参数过多,不利于展示,大部分伪代码会取编译后的js...

白边3阅读 673

感受 Vue3 的魔法力量
• setup语法糖&lt;script setup lang=&quot;ts&quot;&gt;摆脱了书写声明式的代码,用起来很流畅,提升不少效率

京东云开发者4阅读 815

封面图
拥抱下一代前端工具链-Vue老项目迁移Vite探索
随着项目的不断维护,代码越来越多,项目越来越大。调试代码的过程就变得极其痛苦,等待项目启动的时间也越来越长,尤其是需要处理紧急问题的时候,切换项目启动,等待的时间就会显得尤为的漫长。无法忍受这种开...

京东云开发者3阅读 315

封面图
1.2k 声望
71 粉丝
宣传栏