Vite打包组件库
动机
去年使用vue3 + TSX封装组件,结果卡在了打包上,直到最近发现,vite提供了tsx的打包插件。
组件准备
在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 粉丝
推荐阅读
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 中。
Beverly赞 5阅读 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语法糖<script setup lang="ts">摆脱了书写声明式的代码,用起来很流畅,提升不少效率
京东云开发者赞 4阅读 815
拥抱下一代前端工具链-Vue老项目迁移Vite探索
随着项目的不断维护,代码越来越多,项目越来越大。调试代码的过程就变得极其痛苦,等待项目启动的时间也越来越长,尤其是需要处理紧急问题的时候,切换项目启动,等待的时间就会显得尤为的漫长。无法忍受这种开...
京东云开发者赞 3阅读 315
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。