vue3+tsx+rollup 模块化打包

已于 2022-10-15 20:50:16 修改
阅读量741 收藏
点赞数
分类专栏： vue 文章标签： javascript vue.js 前端
于 2022-10-15 20:47:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jackliujay/article/details/127340243
版权

Vue 3 + TypeScript + Vite + Rollup

项目地址：链接
当前项目是为了测试rollup编译tsx，进行模块化打包，本项目可以作为外部依赖添加到package.json中使用
，类似于第三方组件 antd或element，当然本项目是业余的，做个参考即可

声明：项目代码是我多方借鉴总结出来的，并不是原创。

关键文件

  1. .babelrc
  2. rollup.config.js
  3. tsconfig.json

重点

  1. rollup对图片文件的编译
  2. tsx对图片文件的解析

项目文件

进行测试的文件都放在了packages目录下

项目结构

bar目录下的内容

内容其实很简单，只是一个测试而已

内容很简单

最终效果

最终结果

编译后的文件结构

在这里插入图片描述
使用

在这里插入图片描述

唐纳德川家军
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue3+antv x6+tsx 制作自定义流程图
09-23
1.使用vue3+antv x6+tsx制作自定义流程图 2.实现自定义拖拉组件。 3.支持自定义拓展。
使用rollup打包vue3+ts+vite组件并发布至npm
温壁
05-22 1752
rollup打包vue3+ts+vite的组件功能案例教程
vite 深入浅出
old brother stable
11-13 418
vite(轻量，轻快的意思) 是一个由原生ES Module驱动的 Web 开发前端构建工具。浏览器原生 ESM：浏览器支持的 JavaScript 模块化标准，可以直接使用标签加载模块，无需打包或转译。在开发环境下基于浏览器原生ES Module的支持实现了no-bundle服务。另一方面借助esbuild超快的编译速度来做第三方库构建和ts/jsx语法编译，从而能够有效提高开发效率。在生产环境下基于rollup打包来构建代码。
使用rollup打包ts+react缓存组件发布npm
Suk__的博客
05-05 1385
新建一个项目目录比如叫root,下面新建一个rollup的配置文件: rollup.config.ts 因为rollup良好支持ts和esmodule 所以用ts配置文件。
NPM 组件你应该知道的事
weixin_46961967的博客
09-24 338
开发一个 npm 组件， 你是否了解需要对外导出什么格式的代码？如何让 npm 组件体积尽可能小？整篇文章按照如下目录进行讲解：为何需要打包组件打包输出格式如何打包 esm 模式代码（感...
ts重点学习140-rollup打包ts文件笔记
qq_41632427的博客
10-01 1214
ts
vue 第六天 前端工程化 webpack 、babel 、vue单组件、vue脚手架、Element-ui
m0_55170432的博客
05-11 297
-------------- 模块化相关规范 ------------------ 1.1 模块化概述 传统开发模式的主要问题 命名冲突 文件依赖 通过模块化解决上述问题 模块化就是把单独的一个功能封装到一个模块（文件）中，模块之间相互隔离，但是可以通过特定的接口公开内部成员，也可以依赖别的模块 模块化开发的好处：方便代码的重用，从而提升开发效率，并且方便后期的维护 1.2 浏览器端模块化规范 AMD Require.js (http://www.requirejs.cn/) CMD Sea
Vue全家桶(四)之ES6模块化与webpack打包
m0_55990909的博客
04-07 1159
✍目录总览： 模块化相关规范 1. 模块化概述 传统开发模式的主要问题 ① 命名冲突 ② 文件依赖 通过模块化解决上述问题 模块化就是把单独的一个功能封装到一个模块（文件）中，模块之间相互隔离，但是可以通过特定的接口公开内部成员，也可以依赖别的模块 模块化开发的好处：方便代码的重用，从而提升开发效率，并且方便后期的维护 2. 浏览器端模块化规范 3. 服务器端模块化规范 1. CommonJS ① 模块分为 单文件模块 与 包 ② 模块成员导出：module.exports 和 exports ③
【Rollup】自定义组件 - 文章渲染组件
乐闻世界
12-12 833
【Rollup】打包文章渲染组件 前言 利用 Rollup 构建一个文章展示抽屉SDK，用来记录前端自定义SDK的过程 工程实践 初始化 创建项目 mkdir packageName npm init -y Typescript功能初始化 npm install typescript -D npx tsc -init 创建 rollup.config.js import typescript from 'rollup-plugin-typescript2'; import less fr
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化
05-12
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+...
uniapp+vue3+pinia框架（模块化+持久化存储）
06-15
uniapp+vue3+pinia框架 uniapp：导航栏双页切换 vue3+pinia：实例化+参数输出+方法调用+模块化+持久化存储 购买后任何问题请私信沟通或添加技术服务群咨询。
vue3+vite+qiankun+monorepo框架
08-03
vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+...
基于vue3+elementPlus的后台管理系统模板
02-18
基于vue3+elementPlus的后台管理系统模板
报表控件Stimulsoft在JavaScript报告工具中的事件：查看器事件（上）
励志做最业余的专业博主，控件产品可以私我~
04-28 860
在本文中，我们为JS报告工具中的查看器事件提供了全面的指南，包括它们的详细描述、参数列表等一系列详细内容。
element-ui的bug记录
nick_zhang的博客
04-29 547
7.el-dialog组件在关闭时，会触发子组件的created/mounted生命周期。原因是当visible改变为false，即关闭dialog的时候，如果用户设置了destroyOnClose=true，则执行key++；key是绑定在较外层的div上的，key值的变化会导致这个div重新渲染。6.select 的 popper-append-to-body ,默认值为true;dialog的append-to-body,默认值为false;3.element表格前端分页。
bpmn-js推荐几款常用的插件
飞云先生
04-30 109
bpmn-js整体框架库的风格是以组件的方式进行实现的，这样的结构也更加便于我们更好的对其进行功能扩展，以及客制化功能实现。其实bpmn.io已经为我们实现了较多场景的组件的实现，了解对应组件的功能更能便于我们区分是否需要自己实现，降低重复造轮子的行为，提高开发效率，本篇文章主要是介绍常见的bpmn-js中使用的组件库。
基于React实现B站评论区
最新发布
stu_kk的博客
05-02 863
使用React构建了一个仿照B站基本的前端评论系统，实现了动态加载、排序、添加和删除评论的基本功能。通过React的状态管理和事件处理机制，实现了交互式的用户体验。但是在实际应用中，还需考虑与后端接口的交互、错误处理、分页加载、以及更复杂的用户交互逻辑。
《ElementUI 基础知识》el-tabs header 监听鼠标中键滚动时左右滑动（ElementPlus同样适用）
前端技术
04-29 942
监听 el-tabs 头在鼠标 hover 时。滑动鼠标中键，可左右滑动！
表格隔行变色
weixin_54339833的博客
05-02 373
2.$(document).ready() 是 jQuery 中的一个函数，它确保在文档结构（DOM）加载完成后执行指定的代码。与原生 JavaScript 的 window.onload 不同，$(document).ready() 会在 HTML 文档结构被加载和解析完成后立即执行，而无需等待样式表、图片和子框架的完成加载。if (index % 2 === 0) { // 偶数行。if (i % 2 === 0) { // 偶数行。// 可以省略，因为默认背景色通常是白色。
vue3 +tsx emit
10-27
在Vue3中，使用TSX编写组件时，可以使用emit来实现父子组件之间的通信。emit需要在setup函数的第二个参数中进行解构，然后使用defineEmits来定义事件名称。在组件中使用v-model来绑定数据，如果不想使用默认的modelValue名称，可以使用v-model:title的方式来指定名称。在子组件中，可以使用v-model={[value, 'eventName']}的方式来接收父组件传递的值，并在setup函数中使用emit('eventName', newValue)来更新父组件的值。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值