《三十》模块化打包构建工具 Rollup

19的2小时06分钟

Rollup 是一个 JavaScript 的模块化打包工具,可以帮助编译微小的代码到庞大的复杂的代码中(例如一个库或者一个应用程序)。

Rollup 和 Webpack 的区别:

  1. Rollup 也是一个模块化的打包工具,但是它主要是针对 ESModule 进行打包的(当然也有解决办法可以处理其他模块化代码);Rollup 更多时候是专注于处理 JavaScript 代码(当然也可以处理其他文件);配置理念相对于 Webpack 来说更加简洁和容易理解。
  2. Webpack 是一个模块化的打包工具,可以针对各种模块 代码;可以通过 Loader 处理各种类型的文件以及它们之间的依赖关系。

通常在实际开发中都会使用 Webpack,例如 React、Vue、Angular 项目都是基于 Webpack 的;在对库文件进行打包时,通过会使用 Rollup,例如 React、Vue、dayjs 源码本身都是基于 Rollup 的。

Rollup 的基本使用:

在命令行中使用 Rollup:

  1. 新建一个 rollup-demo 文件,运行 npm init -y 对其进行初始化。
  2. 安装 Rollup:npm install rollup -D
  3. 新建 src/index.js 文件,并编写代码。
    const sum = (num1, num2) => {console.log(num1 + num2)
    }
    export {sum
    }
    
  4. 运行 npx rollup ./src/index.js -o dist/index_esmodule.js 命令对 src/index.js 进行打包,输出到 dist//index_esmodule.js 中。
    请添加图片描述
  5. 运行 npx rollup ./src/index.js -f cjs -o dist/index_commonjs.js 命令,使用 CommonJS 的格式对 src/index.js 进行打包,输出到 dist/index_commonjs.js 中。
    请添加图片描述
  6. 运行 npx rollup ./src/index.js -f amd -o dist/index_commonjs.js 命令,使用 AMD 的格式对 src/index.js 进行打包,输出到 dist/index_amd.js 中。
    请添加图片描述
  7. 运行 npx rollup ./src/index.js -f iife -o dist/index_browser.js 命令,使用 AMD 的格式对 src/index.js 进行打包,输出到 dist/index_browser.js 中。
    请添加图片描述

使用 Rollup 的配置文件:

  1. 在项目的根目录下创建 rollup.config.js 配置文件,并编写配置。
    module.exports = {// 入口input: './src/index.js',// 出口。属性值可以是一个对象类型的数组,将会输出多个结果;也可以是一个对象,只输出一个结果output: [{file: 'dist/index_esmodule.js'},{format: 'umd',// 一旦导出为 UMD 格式,就必须指定 name 名称name: 'utils',file: 'dist/index_umd.js'},]
    }
    
  2. 运行 npx rollup -c 进行打包,会发现打包输出出了两种格式的文件。
    请添加图片描述

使用 Rollup 打包 CommonJS 语法的代码:

Rollup 主要是针对 ESModule 的,如果代码存在 CommonJS 语法,虽然仍然可以打包成功,但是无法识别并对其进行处理。

  1. 新建 src/js/format.js 文件并编写代码。
    const dateFormat = () => {return '2000-10-10'
    }module.exports = {dateFormat
    }
    
  2. 新建 src/index.js 文件并编写代码。
    const {dateFormat} = require('./js/format')
    console.log(dateFormat())
    
  3. 新建 src/index.html 文件并编写代码。
    <!DOCTYPE html>
    <html lang="en">
    <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
    </head>
    <body><!-- 引入打包后的 JavaScript 文件 --><script src="../dist/index.js"></script>
    </body>
    </html>
    
  4. 新建 rollup.config.js 文件并编写配置信息。
    module.exports = {input: './src/index.js',output:{file: 'dist/index.js'}
    }
    
  5. 运行 npx rollup -c 命令进行打包,会发现,rollup 仍然可以打包成功,但是在浏览器中运行会报错,因为浏览器不认识 require() 语法。
    请添加图片描述
    请添加图片描述
  6. 安装 @rollup/plugin-commonjs 插件使 Rollup 能够识别并转换代码中的 CommonJS 语法:npm install @rollup/plugin-commonjs -D
  7. rollup.config.js 文件中修改配置信息。
    // 引入 commonjs 插件
    const commonjs = require("@rollup/plugin-commonjs")module.exports = {input: './src/index.js',output:{file: 'dist/index.js'},// 使用 commonjs 插件plugins: [commonjs()]
    }
    
  8. 修改 src/index.js 文件中的导入语法,导入时仍然需要使用 ESModule 语法,否则还是会报错。

    目的是为了保证开发者自己编写的代码仍然使用 ESModule 语法,同时兼容第三方库中使用 CommonJS 语法。因此导出允许使用 CommonJS,但是导入必须使用 ESModule。

    import {dateFormat} from './js/format.js'console.log(dateFormat())
    
  9. 运行 npx rollup -c 命令进行打包,会发现,rollup 可以打包成功,并且在浏览器中也可以成功运行。
    请添加图片描述
    请添加图片描述
  10. npm install lodash -D 安装 lodash,并在 src/index.js 文件中引入使用。会发现使用第三方库还是有问题,lodash 的源码并没有被打包进输出的文件中,在浏览器中运行也报错了。这是因为如果导入的库来自 node_modules 的话,还需要使用另一个插件。
    请添加图片描述
    请添加图片描述
  11. 安装 @rollup/plugin-node-resolve 插件来处理导入来自 node_modules 的依赖:npm install @rolluop/plugin-node-resolve -D
  12. rollup.config.js 文件中修改配置信息。
    const commonjs = require("@rollup/plugin-commonjs")
    // 引入 resolve 插件
    const resolve = require('@rollup/plugin-node-resolve') module.exports = {input: './src/index.js',output:{file: 'dist/index.js'},// 使用 resolve 插件plugins: [commonjs(),resolve()]
    }
    
  13. 运行 npx rollup -c 命令进行打包,会发现,rollup 可以打包成功,并且在浏览器中也可以成功运行。
    请添加图片描述

请添加图片描述

使用 Rollup 转换 ES+ 语法的代码:

  1. 新建 src/index.js文件,并编写代码。

    const fn = () => {console.log('index')
    }
    fn()
    
  2. 新建 rollup.config.js文件,并编写配置信息。

    module.exports = {input: './src/index.js',output:{file: 'dist/index.js'},
    }
    
  3. 运行 npx rollup -c 命名进行打包,会发现,打包输出的文件中并没有对 ES6+ 语法进行转换。
    在这里插入图片描述

  4. 安装 @rollup/plugin-babel 插件对 ES6+ 代码进行转换:npm install @rollup/plugin-babel -D

  5. 安装 Bable 的核心:npm install @babel/core -D

  6. 安装 Bable 中的预设:npm install @babel/preset-env -D

  7. 修改 rollup.config.js 文件中的配置信息。

    // 引入 Babel 插件
    const babel = require('@rollup/plugin-babel')module.exports = {input: './src/index.js',output:{file: 'dist/index.js'},plugins: [// 使用 Babel 插件babel({babelHelpers: 'bundled',}),]
    }
    
  8. 新建 babel.config.js 文件,并编写 Babel 的配置信息。

    module.exports = {presets: ['@babel/preset-env',]
    }
    
  9. 运行 npx rollup -c 命名进行打包,会发现,打包输出的文件中对 ES6+ 语法进行了转换。
    在这里插入图片描述

使用 Rollup 对打包后的 JavaScript 代码进行压缩:

  1. 新建 ·src/index.js 文件,并编写代码。

    const fn = (num1, num2) => {console.log(num1, num2)return num1 + num2
    }
    const result = fn(10, 20)
    console.log(result)
    
  2. 新建 rollup.config.js 文件,并编写配置信息。

    module.exports = {input: './src/index.js',output:{file: 'dist/index.js'},
    }
    
  3. 运行 npx rollup -c 命名进行打包,会发现,打包输出的文件中并没有对 JavaScript 代码进行压缩。
    在这里插入图片描述

  4. 安装 @rollup/plugin-terser 插件用来对打包后的 JavaScript 代码进行压缩 :npm install @rollup/plugin-terser -D

  5. 修改 rollup.config.js 文件中的配置信息。

    // 引入 terser 插件
    const terser = require('@rollup/plugin-terser')module.exports = {input: './src/index.js',output:{file: 'dist/index.js'},plugins: [// 使用 terser 插件terser()]
    }
    
  6. 运行 npx rollup -c 命名进行打包,会发现,打包输出的文件中对 JavaScript 代码进行了压缩。
    在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/211110.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

排序:非递归的快排

目录 非递归的快排&#xff1a; 代码分析&#xff1a; 代码演示&#xff1a; 非递归的快排&#xff1a; 众所周知&#xff0c;递归变成非递归&#xff0c;而如果还想具有递归的功能&#xff0c;那么递归的那部分则需要变成循环来实现。 而再我们的排序中&#xff0c;我们可…

Azure Machine Learning - 使用 Azure OpenAI 服务生成图像

在浏览器/Python中使用 Azure OpenAI 生成图像&#xff0c;图像生成 API 根据文本提示创建图像。 关注TechLead&#xff0c;分享AI全维度知识。作者拥有10年互联网服务架构、AI产品研发经验、团队管理经验&#xff0c;同济本复旦硕&#xff0c;复旦机器人智能实验室成员&#x…

【动态规划】【广度优先】LeetCode2258:逃离火灾

作者推荐 本文涉及的基础知识点 二分查找算法合集 动态规划 二分查找 题目 给你一个下标从 0 开始大小为 m x n 的二维整数数组 grid &#xff0c;它表示一个网格图。每个格子为下面 3 个值之一&#xff1a; 0 表示草地。 1 表示着火的格子。 2 表示一座墙&#xff0c;你跟…

pytorch:YOLOV1的pytorch实现

pytorch&#xff1a;YOLOV1的pytorch实现 注&#xff1a;本篇仅为学习记录、学习笔记&#xff0c;请谨慎参考&#xff0c;如果有错误请评论指出。 参考&#xff1a; 动手学习深度学习pytorch版——从零开始实现YOLOv1 目标检测模型YOLO-V1损失函数详解 3.1 YOLO系列理论合集(Y…

Redis对象类型检测与命令多态

一. 命令类型 Redis中操作键的命令可以分为两类。 一种命令可以对任意类型的键执行&#xff0c;比如说DEL&#xff0c;EXPIRE&#xff0c;RENAME&#xff0c;TYPE&#xff0c;OBJECT命令等。 举个例子&#xff1a; #字符串键 127.0.0.1:6379> set msg "hello world&…

第76讲:MySQL数据库中常用的命令行工具的基本使用

文章目录 1.mysql客户端命令工具2.mysqladmin管理数据库的客户端工具3.mysqlbinlog查看数据库中的二进制日志4.mysqlshow统计数据库中的信息5.mysqldump数据库备份工具6.mysqllimport还原备份的数据7.source命令还原SQL类型的备份文件 MySQL数据库提供了很多的命令行工具&#…

python 画条形图(柱状图)

目录 前言 基础介绍 月度开支的条形图 前言 条形图&#xff08;bar chart&#xff09;&#xff0c;也称为柱状图&#xff0c;是一种以长方形的长度为变量的统计图表&#xff0c;长方形的长度与它所对应的变量数值呈一定比例。 当使用 Python 画条形图时&#xff0c;通常会使…

vscode 编译运行c++ 记录

一、打开文件夹&#xff0c;新建或打开一个cpp文件 二、ctrl shift p 进入 c/c配置 进行 IntelliSense 配置。主要是选择编译器、 c标准&#xff0c; 设置头文件路径等&#xff0c;配置好后会生成 c_cpp_properties.json&#xff1b; 二、编译运行&#xff1a; 1、选中ma…

zabbix 通过 odbc 监控 mssql

1、环境 操作系统&#xff1a;龙蜥os 8.0 zabbix&#xff1a;6.0 mssql&#xff1a;2012 2、安装odbc 注意&#xff1a;需要在zabbix server 或者 zabbix proxy 安装 odbc驱动程序 dnf -y install unixODBC unixODBC-devel3、安装mssql驱动程序 注意&#xff1a;我最开始尝试…

Tomcat管理功能使用

前言 Tomcat管理功能用于对Tomcat自身以及部署在Tomcat上的应用进行管理的web应用。在默认情况下是处于禁用状态的。如果需要开启这个功能&#xff0c;需要配置管理用户&#xff0c;即配置tomcat-users.xml文件。 &#xff01;&#xff01;&#xff01;注意&#xff1a;测试功…

react 学习笔记 李立超老师 | (学习中~)

文章目录 react学习笔记01入门概述React 基础案例HelloWorld三个API介绍 JSXJSX 解构数组 创建react项目(手动)创建React项目(自动) | create-react-app事件处理React中的CSS样式内联样式 | 内联样式中使用state (不建议使用)外部样式表 | CSS Module React组件函数式组件和类组…

不同品牌的手机如何投屏到苹果MacBook?例如小米、华为怎样投屏比较好?

习惯使用apple全家桶的人当然知道苹果手机或iPad可以直接用airplay投屏到MacBook。 但工作和生活的多个场合里&#xff0c;并不是所有人都喜欢用同一品牌的设备&#xff0c;如果同事或同学其他品牌的手机需要投屏到MacBook&#xff0c;有什么方法可以快捷实现&#xff1f; 首先…

【GDB】

GDB 1. GDB调试器1.1 前言1.2 GDB编译程序1.3 启动GDB1.4 载入被调试程序1.5 查看源码1.6 运行程序1.7 断点设置1.7.1 通过行号设置断点1.7.2 通过函数名设置断点1.7.3 通过条件设置断点1.7.4 查看断点信息1.7.5 删除断点 1.8 单步调试1.9 2. GDB调试core文件2.1 设定core文件的…

(五)五种最新算法(SWO、COA、LSO、GRO、LO)求解无人机路径规划MATLAB

一、五种算法&#xff08;SWO、COA、LSO、GRO、LO&#xff09;简介 1、蜘蛛蜂优化算法SWO 蜘蛛蜂优化算法&#xff08;Spider wasp optimizer&#xff0c;SWO&#xff09;由Mohamed Abdel-Basset等人于2023年提出&#xff0c;该算法模型雌性蜘蛛蜂的狩猎、筑巢和交配行为&…

iOS(swiftui)——系统悬浮窗( 可在其他应用上显示,可实时更新内容)

因为ios系统对权限的限制是比较严格的,ios系统本身是不支持全局悬浮窗(可在其他app上显示)。在iphone14及之后的iPhone机型中提供了一个叫 灵动岛的功能,可以在手机上方可以添加一个悬浮窗显示内容并实时更新,但这个功能有很多局限性 如:需要iPhone14及之后的机型且系统…

Java面试遇到的一些常见题

目录 1. Java语言有几种基本类型&#xff0c;分别是什么&#xff1f; 整数类型&#xff08;Integer Types&#xff09;&#xff1a; 浮点类型&#xff08;Floating-Point Types&#xff09;&#xff1a; 字符类型&#xff08;Character Type&#xff09;&#xff1a; 布尔类…

(六)五种最新算法(SWO、COA、LSO、GRO、LO)求解无人机路径规划MATLAB

一、五种算法&#xff08;SWO、COA、LSO、GRO、LO&#xff09;简介 1、蜘蛛蜂优化算法SWO 蜘蛛蜂优化算法&#xff08;Spider wasp optimizer&#xff0c;SWO&#xff09;由Mohamed Abdel-Basset等人于2023年提出&#xff0c;该算法模型雌性蜘蛛蜂的狩猎、筑巢和交配行为&…

【完整项目】双模式答题卡识别软件中YOLO模式的训练部分详解,包括训练填涂区域和手写准考证号,手把手详细教学,可延申拓展训练其他图像数据

目录 前言1. 数据准备2. 数据标注3. 先跑起来Windows下用本地的CPU或GPU训练本地Windows系统连接服务器训练前言 前文:【完整项目】基于Python+Tkinter+OpenCV+Yolo+手写OCR的双模式答题卡识别软件的设计与实现 如果你需要训练自己的答题卡模型,那么请先看上面的文章链接。…

Flutter自定义下拉选择框dropDownMenu

利用PopupMenuButton和PopupMenuItem写了个下拉选择框&#xff0c;之所以不采用系统的&#xff0c;是因为自定义的更能适配项目需求&#xff0c;话不多说&#xff0c;直接看效果 下面直接贴出代码、代码中注释写的都很清楚&#xff0c;使用起来应该很方便&#xff0c;如果有任何…

OpenSSL 编程指南

目录 前言初始化SSL库创建SSL 上下文接口(SSL_CTX)安装证书和私钥加载证书(客户端/服务端证书)加载私钥/公钥加载CA证书设置对端证书验证例1 SSL服务端安装证书例2 客户端安装证书创建和安装SSL结构建立TCP/IP连接客户端创建socket服务端创建连接创建SSL结构中的BIOSSL握手服务…