WEBPACK和ROLLUP构建前端工具库

2023-05-16

 

1. WEBPACK

  • webpack 提供了构建和打包不同模块化规则的库,只是需要自己去搭建开发底层架构。
  • vue-cli,基于 webpack , vue-cli 脚手架工具可以快速初始化一个 vue 应用,它也可以初始化一个构建库。

2. ROLLUP

  • rollup 是一个专门针对 JavaScript 模块打包器,可以将应用或库的小块代码编译成更复杂的功能代码。
  • Vue、React 等许多流行前端框架的构建和打包都能看到 rollup 的身影。

ROLLUP 和 WEBPACK应用场景

  • webpack 主要职能是开发应用,而 rollup 主要针对的就是 js 库的开发,如果你要开发 js 库,那 webpack 的繁琐配置和打包后的文件体积就不太适用了,通过 webpack 打包构建出来的源代码增加了很多工具函数以外的模块依赖代码。
  • rollup 只是把业务代码转码成目标 js ,小巧且轻便。rollup 对于代码的 Tree-shaking 和 ES6 模块有着算法优势上的支持,如果只想构建一个简单的库,并且是基于 ES6 开发的,加上其简洁的 API,rollup 得到更多开发者的青睐。

rollup 全家桶

•  rollup(工具库打包构建核心包)

• rollup-plugin-livereload(rollup 插件,热更新,方便本地 debugger 开发)

• rollup-plugin-serve(rollup 插件,本地服务代理,方便在本地 html 中调试工具)

• rollup-plugin-terser(rollup 插件,代码压缩混淆)

• rollup-plugin-visualizer(rollup 插件,可视化并分析 Rollup bundle,以查看模块占用)

•  @rollup/plugin-babel(rollup 插件,rollup 的 babel 插件,ES6 转 ES5)

• @rollup/plugin-commonjs(rollup 插件,用来将 CommonJS 模块转换为 ES6,这样它们就可以包含在 Rollup 包中)

• @rollup/plugin-json(rollup 插件,它将.json 文件转换为 ES6 模块)

•  @rollup/plugin-node-resolve(rollup 插件,它使用节点解析算法定位模块,用于在节点模块中使用第三方 node_modules 包)

• @rollup/plugin-typescript(rollup 插件,对 typescript 的支持,将 typescript 进行 tsc 转为 js)

 

typescript 相关

• typescript(使用 ts 开发工具库)

• tslib(TypeScript 的运行库,它包含了 TypeScript 所有的帮助函数)

•  @typescript-eslint/eslint-plugin(TypeScript 的 eslint 插件,约束 ts 书写规范)

• @typescript-eslint/parser(ESLint 解析器,它利用 TypeScript ESTree 来允许 ESLint 检测 TypeScript 源代码)

 

文档相关

• typedoc(TypeScript 项目的文档生成器)

• gulp(使用 gulp 构建文档系统)

• gulp-typedoc(Gulp 插件来执行 TypeDoc 工具)

• browser-sync(文档系统热更新)

单元测试相关

• jest(一款优雅、简洁的 JavaScript 测试框架)

• @types/jest(Jest 的类型定义)

• ts-jest(一个支持源映射的 Jest 转换器,允许您使用 Jest 来测试用 TypeScript 编写的项目)

• @babel/preset-typescript(TypeScript 的 Babel 预设)

其他依赖

• eslint(代码规范约束)

• @babel/core(@rollup/plugin-babel 依赖的 babel 解析插件)

• @babel/plugin-transform-runtime(babel 转译依赖)

• @babel/preset-env(babel 转译依赖)

• chalk(控制台字符样式)

• rimraf(UNIX 命令 rm -rf 用于 node)

• cross-env(跨平台设置 node 环境变量)

 

参考资料

[1] rollup 英文文档(https://rollupjs.org/guide/en/#quick-start)

[2] rollup 中文文档(https://rollupjs.org/guide/zh/#introduction)

[3] Rollup.js 实战学习笔记(https://chenshenhai.github.io/rollupjs-note/)

[4] Rollup 打包工具的使用(https://juejin.cn/post/6844904058394771470)

[5] TypeScript、Rollup 搭建工具库(https://juejin.cn/post/6844904035309322254)

[6] 使用 rollup.js 封装各项目共用的工具包(https://juejin.cn/post/6993720790046736420)

[7] 如何开发一个基于 TypeScript 的工具库并自动生成文档(https://juejin.cn/post/6844903881030238221)

[8] 一款优雅、简洁的 JavaScript 测试框架(https://jestjs.io/zh-Hans/)

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

WEBPACK和ROLLUP构建前端工具库 的相关文章

随机推荐

  • 【树莓派】设置树莓派开机自动运行python脚本

    近期因科研需要 xff0c 需命令树莓派开机后无需进行任何操作自动运行一个python脚本 xff0c 经查阅部分资料后实现了该功能 xff0c 为方便以后查看特此记录一下 1 打开cmd xff0c 输入 sudo vim span cl
  • 部分机器人领域顶会顶刊官网及22年顶会召开时间

    顶刊 Science Robotics AAAS The International Journal of Robotics Research IJRR Journal of Forestry Research JFR IEEE Trans
  • 服务器非root下安装Python cyglfw3库

    服务器非root下安装Python cyglfw3库 在服务器中跑PVNet的代码时遇到的 xff0c 废了比较大的劲才解决 xff0c 特意记录一下解决过程 如果你有sudo权限直接使用sudo apt get install libgl
  • FFB6D搭建环境

    文章目录 FFB6D搭建环境搭建前的准备 根据需要选择性浏览 安装apex安装normal speed安装opencv3 安装pybind11安装normal speed 安装RandLA运行代码前的准备运行代码有疑问多多交流 xff0c
  • win32Day06:控件

    1 什么是控件 xff1f 控件是具备特殊功能的窗口 xff0c 并且有模板 控件的特性 xff1a 一定是子窗口 和创建主窗口一样 xff0c 都是使用CreateWindow函数来创建 xff08 控件这种 xff09 子窗口和主窗口的
  • SIFT3D点云关键点提取详细介绍

    1 引言 SIFT3D的理论基础完全是从图像特征SIFT2D中迁移类比过来的 xff0c 类似的还有Harris3D和Harris6D的理论也是来源于Harris2D的 xff0c 这些点云特征在PCL库中都有具体的实现 Harris3D和
  • 【视觉注意力机制集锦】引言

    视觉注意力机制集锦之引言 1 注意力机制 1 1 注意力机制简介 卷积神经网络具有很强的拟合数据的能力 xff0c 但是由于优化算法和计算能力的限制 xff0c 在实践中 xff0c 卷积网络很难达到通用近似的能力 特别是在处理规模较大的输
  • 期刊论文发表一定要有老师吗

    期刊论文发表一定要有老师吗 不一定 xff0c 具体要看论文的情况以及各方面的要求 xff0c 一般研究生和博士生论文很多都有老师 xff0c 本科论文很多是毕业生自己完成即可 xff0c 大多也是可以自己完成的 xff0c 如果要求有老师
  • QT菜单样式Ribbon Control for Qt, Office ribbon control

    基于Qt xff08 最低要求Qt5 xff0c 支持C 43 43 11的编译器 xff09 开发的一个轻量级的Ribbon控件 Office样式UI 使用Qt Creator直接打开SARibbon pro xff0c 并编译即可 xf
  • C/C++:基本语法看这一篇就够了

    前言 本文来自菜鸟教程的C语言教程和C 43 43 教程的学习笔记 xff0c 对其中的示例有所删减与变更 xff0c 建议以以下两个链接为准 虽说C 43 43 是C的扩展 xff0c 但貌似二者存在差集 xff0c 而本文只展示了兼容部
  • Qt之简易版网络调试助手

    简述 qt中为网络编程提供了一个QtNetwork类 xff0c 使用QtNetwork可以实现ftp文件传输 xff0c 基于tcp ip协议的客户端和 xff08 服务端 xff09 开发等等 xff0c 本文基于QtNetwork中的
  • ubuntu18.04安装docker以及过程中遇到的问题

    一 在ubuntu18 04上安装 1 更新索引包和安装相关依赖 xff1a sudo apt update sudo apt install apt span class token operator span transport spa
  • # 解决onos localhost 登陆onos后台时 需要输入密码问题

    登陆后台要求输入密码 xff0c 但尝试各种密码均无法登陆 一般从网上拷贝来的onos安装包 xff0c 使用时容易出现此类问题 xff1a 登录后台时会要求输入密码 xff0c 但一般各种密码都无效 问题解决 onos命名其实是一个she
  • visual c++与visual studio有什么区别

  • 【基于pyAudioKits的Python音频信号处理(八)】语音增强:谱减法、维纳滤波和卡尔曼滤波

    pyAudioKits是基于librosa和其他库的强大Python音频工作流支持 API速查手册 通过pip安装 xff1a pip install pyAudioKits 本项目的GitHub地址 xff0c 如果这个项目帮助到了你 x
  • 3.K8S网络之pod中容器到容器之间的通信

    文章目录 1 引入1 1 创建一个网络名称空间1 2 root网络名称空间1 3 docker网络名称空间 4 pod容器到容器之间的通信通信的原理 1 引入 在Linux中 xff0c 网络命名空间提供了一个逻辑的网络堆栈 xff0c 包
  • C++基础(八)--空指针

    在C和C 43 43 中 xff0c 用0和NULL都可以表示空指针 声明指针之后 xff0c 对指针赋值之前 xff0c 让它指空 xff0c 表示没有指向任何地址 使用空指针的后果 xff08 1 xff09 如果对空指针进行解引用 x
  • 【嵌入式Linux】嵌入式Linux驱动开发基础知识之驱动设计的思想:面向对象/分层/分离

    文章目录 前言1 分离设计驱动程序分析 程序分层通用驱动程序 面向对象个性化驱动程序 分离 APP 程序分析 前言 韦东山嵌入式Linux驱动开发基础知识学习笔记 文章中大多内容来自韦东山老师的文档 xff0c 还有部分个人根据自己需求补充
  • 【飞控理论】四旋翼飞行器控制原理

    该篇博客是对锡月科技无人机飞行控制原理教学内容的整理 1 四旋翼飞行器的两种结构 xff1a 字模式 xff1a Pitch和 Roll与1 3 2 4两组电机呈 45 夹角 十 字模式 xff1a Pitch对应 2 4电机的对轴 xff
  • WEBPACK和ROLLUP构建前端工具库

    1 WEBPACK webpack 提供了构建和打包不同模块化规则的库 xff0c 只是需要自己去搭建开发底层架构 vue cli xff0c 基于 webpack xff0c vue cli 脚手架工具可以快速初始化一个 vue 应用 x