位置: IT常识 - 正文

用 rollup + gulp 造个轮子,别说还挺香(用pullout造句)

编辑:rootadmin
前戏 我是16年入了前端的坑,17年知道了gulp和rollup这两个玩意儿。由于那时webpack势头很猛,便一直没有正眼瞧过它一眼。 直到20年进了一家小公司,做了很多类似的小项目,相同的代码拷来拷去,出现一个bug一堆项目都要改,实在恶心到我了。 于是不得不开始考虑将一些公共的方法和组件提取出 ... 前戏

推荐整理分享用 rollup + gulp 造个轮子,别说还挺香(用pullout造句),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:用roller造句,用role造句,用roll up造句,用rope造句,用roll up造句,用roll造句子,用roll up造句,用rope造句,内容如对您有帮助,希望把文章链接给更多的朋友!

我是16年入了前端的坑,17年知道了gulp和rollup这两个玩意儿。由于那时webpack势头很猛,便一直没有正眼瞧过它一眼。

直到20年进了一家小公司,做了很多类似的小项目,相同的代码拷来拷去,出现一个bug一堆项目都要改,实在恶心到我了。

于是不得不开始考虑将一些公共的方法和组件提取出来,做成一个第三方库来维护。而在库的封装方面,rollup相对于webpack具有一定的优势。

在此,便和大家分享一下如何自己造轮子,封装一个前端库并发布到npm仓库中去。

源码

这是我自己封装的3个库,有兴趣可以看看:

https://github.com/moohng/dan;

用 rollup + gulp 造个轮子,别说还挺香(用pullout造句)

https://github.com/moohng/dui;

https://github.com/moohng/tui;

第一个是工具函数库,后面两个是UI库,目前已全部使用TypeScript重写。dui是基于Vue 3封装的,tui无任何依赖,通过tsx语法实现的。

由于后面没多久就离职了,也就没有封装更多方法和组件进去了,但还是具有一定的学习参考价值,尤其对于新手朋友。

每一个库从目录结构、打包命令、导出方式、ts类型支持、单元测试、自动发布等,几乎所有细节知识都涵盖到了。

实操

浏览百遍,不如实操一遍(文章基于tui来做介绍)。

目录结构

另外,还有lib和dist两个打包输出的目录没有列出来。

从上到下:

.github:GitHub自动打包发布的脚步配置目录;packages:存放tui组件库的源码;src:tui组件库演示demo目录;test:测试相关代码;webpack:暂时忽略,用于测试webpack打包用的;

后面的babel.config.json、gulpfile.esm.js、rollup.config.js、tsconfig.json分别是babel、gulp、rollup、ts的配置文件。

环境配置

tsconfig.json配置如下:

{ "compilerOptions": { "jsx": "preserve", // 支持jsx "module": "esnext", "target": "esnext", "declaration": true, // 生成相应的 .d.ts文件 "declarationDir": "lib", // 生成
本文链接地址:https://www.jiuchutong.com/zhishi/304118.html 转载请保留说明!

上一篇:c语言中函数的两种形式(c语言中函数的实参和形参)

下一篇:安装帝国cms如何配置iis(帝国cms使用手册)

  • 为什么实名认证不通过(为什么实名认证刷脸不成功)

    为什么实名认证不通过(为什么实名认证刷脸不成功)

  • 华为p40闪存规格(华为p40闪存规格参数)

    华为p40闪存规格(华为p40闪存规格参数)

  • c语言enum用法(c语言中enum)

    c语言enum用法(c语言中enum)

  • 充电宝多久不还会扣99(充电宝多久不还会扣分)

    充电宝多久不还会扣99(充电宝多久不还会扣分)

  • b站经验一天上限(b站经验一天最多多少)

    b站经验一天上限(b站经验一天最多多少)

  • 微信登录提示操作过快请稍后再试(微信登录提示操作频繁怎么解决)

    微信登录提示操作过快请稍后再试(微信登录提示操作频繁怎么解决)

  • 小米8已连接但无法访问(小米8已连接但不能上网)

    小米8已连接但无法访问(小米8已连接但不能上网)

  • 多功能视频播放器为什么不能播放视频(多功能视频播放器开不了机怎么办)

    多功能视频播放器为什么不能播放视频(多功能视频播放器开不了机怎么办)

  • oppoa8和a11对比(oppoa8与a11哪个好)

    oppoa8和a11对比(oppoa8与a11哪个好)

  • med aloo什么型号(med一al00是什么型号手机)

    med aloo什么型号(med一al00是什么型号手机)

  • 苹果8听筒没声音免提有声音(苹果8听筒没声音怎么办)

    苹果8听筒没声音免提有声音(苹果8听筒没声音怎么办)

  • 头条被永久封禁怎么办(头条被永久封禁重新注册)

    头条被永久封禁怎么办(头条被永久封禁重新注册)

  • 一加7tpro防水级别(一加7 pro防水性能)

    一加7tpro防水级别(一加7 pro防水性能)

  • 手机云服务是干什么用的(手机里的云服务是什么意思收费吗)

    手机云服务是干什么用的(手机里的云服务是什么意思收费吗)

  • ipad自带录音软件在哪(ipad录音乐软件)

    ipad自带录音软件在哪(ipad录音乐软件)

  • 红米note8自动开关机怎么设置(红米note8自动开启fastmode)

    红米note8自动开关机怎么设置(红米note8自动开启fastmode)

  • soul怎么看谁关注我(soul怎么知道谁看了你的主页)

    soul怎么看谁关注我(soul怎么知道谁看了你的主页)

  • 支付宝怎么连蓝牙音响(支付宝怎么连蓝牙音箱)

    支付宝怎么连蓝牙音响(支付宝怎么连蓝牙音箱)

  • 三星手机截屏快捷键(三星手机截屏快速分享)

    三星手机截屏快捷键(三星手机截屏快速分享)

  • 滴滴快车预付车费什么意思(滴滴快车预付车费多久退回)

    滴滴快车预付车费什么意思(滴滴快车预付车费多久退回)

  • 微信怎么设置手势密码(微信怎么设置手机号码添加)

    微信怎么设置手势密码(微信怎么设置手机号码添加)

  • qq你画我猜在哪里玩(qq你画我猜怎么玩)

    qq你画我猜在哪里玩(qq你画我猜怎么玩)

  • 苹果7p港版支持电信卡吗(苹果7p港版支持双卡吗)

    苹果7p港版支持电信卡吗(苹果7p港版支持双卡吗)

  • 在钉钉上怎么截图(钉钉上怎么截长图)

    在钉钉上怎么截图(钉钉上怎么截长图)

  • 无线充电什么意思(无线充电是什么意思啊)

    无线充电什么意思(无线充电是什么意思啊)

  • Win11卓越性能模式如何开启?Win11卓越模式开启的方法(win11卓越性能模式)

    Win11卓越性能模式如何开启?Win11卓越模式开启的方法(win11卓越性能模式)

  • Linux与grub下如何查看各分区设备名称?(linux grub)

    Linux与grub下如何查看各分区设备名称?(linux grub)

  • audit-viewer命令  查看和总结审计事件的图形工具(audit.exe)

    audit-viewer命令 查看和总结审计事件的图形工具(audit.exe)

  • 性能优化必备——火焰图(性能优化模式)

    性能优化必备——火焰图(性能优化模式)

  • 运输发票税率是9
  • 个人开不动产租赁发票税率
  • 小规模减免税款的账务处理
  • 行政事业单位计提折旧起始日
  • 信息技术服务开票单位填什么
  • 事业单位缴纳增值税标准
  • 母子公司借款要交什么税
  • 挂其他应付款的会计分录
  • 企业接受外部劳务派遣用工支出税前扣除问题
  • 个税手续费返还计入哪个科目
  • 向其他单位无偿提供服务的不需缴纳增值税
  • 资产减值损失结转
  • 延迟交款收息做什么科目?
  • 行政单位要纳税吗
  • 营改增后应付职工薪酬如何核算个人所得税?
  • 加工属于什么税收分类
  • 增值税发票小规模2023
  • 出口退税生产企业增值税附加税怎么申报
  • 出口企业退税流程
  • 出口退税换汇率多少是正常
  • 老板带员工出去吃饭
  • 确认收入后又退部分款怎么做账
  • 金融衍生工具的特点不包括
  • 一般纳税人增值税及附加税费申报表怎么填
  • 偿还借款利息是现金流量什么项目
  • 销售成本会计分录怎么做
  • 删除打印机如何添加
  • macbookpro鼠标滚轮是反的
  • 固定资产拆除怎么处理
  • 公允价值变动损益会计处理
  • php中link什么意思
  • 工程竣工结算资料存档几年
  • 苏格兰高地什么意思
  • 鼓励证券投资基金的政策
  • 安装nodemodules
  • 转让土地需要办什么手续
  • Android App中DrawerLayout抽屉效果的菜单编写实例
  • php页面刷新代码
  • 蜈蚣什么情况下出现
  • vue初始化命令
  • it云化
  • logparser命令
  • 增值税纳税申报表在哪里查询
  • 房屋租赁发票如何免税
  • 入库税款异常怎么处理
  • 其他综合收益什么情况下转入留存收益
  • 将原生html改成vue
  • 个人缴纳社保部分怎么算
  • 会计利润属于什么会计科目
  • 申请制作广告牌的申请
  • 水利建设基金的税率
  • 技术服务费计入成本会计分录
  • 转让金融商品应交增值税可以抵扣吗
  • 支付银行贷款利息的会计处理
  • 残保金管理使用办法
  • 商品流通企业有哪些企业
  • sql server233错误
  • mysql 1449解决
  • mysql+php
  • vericut优化程序
  • linux十大常用软件
  • linux安装solr
  • ami 2.17.1254bios设置图解教程
  • linux安装视频教程
  • linux 排序统计
  • w10安装软件提示
  • mac2019强制关机
  • cocos2dx环境搭建
  • androidstudio调用so文件
  • 百分比的介绍
  • perl脚本函数
  • js开发android应用
  • jquery 图片插件
  • python生成txt文档
  • linux怎么ssh远程
  • jquery cookie用法
  • jquery图片轮播插件slick不动
  • 税务分享风险如何解决
  • 增值税的进项税额转出是什么意思
  • 北京国税办税服务厅
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设