文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Rollup入门实例代码分析

2023-07-05 04:44

关注

这篇文章主要介绍了Rollup入门实例代码分析的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Rollup入门实例代码分析文章都会有所收获,下面我们一起来看看吧。

Rollup介绍及使用

1、Rollup 概述

初衷:提供一个充分利用ESM(ES Module)各项特性的高效打包器

2、Rollup 快速上手

安装:yarn add rolluo --dev用法:    yarn rollup  //不传递任何参数的情况下,打印Rollup的帮助信息    yarn rollup ./src/index.js --format iife //执行index.js文件并以iife(自调用函数)的方式输出(--format指定输出格式)    yarn rollup ./src/index.js --format iife --file dist/bundle.js //输出文件到dist/bundle.js默认开启chunk去掉多余代码,优化输出结果

3、Rollup 配置文件

rollup.config.js
export default {input: 'src/index.js',    output: {        file: 'dist/bundle.js',        format: 'iife'    }}

4、Rollup 使用插件

插件是Rollup的扩展途径

rollup.config.js

5、Rollup 加载 NPM 模块

Rollup默认只能根据文件路径加载本地的文件模块,第三方模块不能直接通过模块名称去导入

rollup-plugin-node-resolve:安装后Rollup可直接通过模块名称导入模块安装:yarn add rollup-plugin-node-resolve --dev
rollup.config.js
import resolvefrom 'rollup-plugin-node-resolve'export default {input: 'src/index.js',    output: {        file: 'dist/bundle.js',format: 'iife'    },    plugins: [        resolve()    ]}

6、Rollup 加载 CommonJS 模块

rollup-plugin-commonjs:因为Rollup默认只能处理ESM模块,使用这个插件Rollup就可以处理CommonJS

安装:yarn add rollup-plugin-commonjs --dev
rollup.config.js
import commonjsfrom 'rollup-plugin-commonjs'export default {input: 'src/index.js',    output: {        file: 'dist/bundle.js',format: 'iife'    },    plugins: [        commonjs()    ]}

7、Rollup 代码拆分

运行:yarn rollup
index.js
import('./logger').then(({ log }) => {    log('code splitting~')})
rollup.config.js
export default {input: 'src/index.js',  output: {      dir: 'dist',      format: 'amd'  }}

8、Rollup 多入口打包

多入口打包内部会自动提取公共模块,也就是说内部会使用代码拆分

rollup.config.js
方式1:
export default {input: ['src/index.js', 'src/album.js'],    output: {        dir: 'dist',        format: 'amd'    }}
方式2:
export default {input: {        foo: 'src/index.js',        bar: 'src/album.js'    },output: {dir: 'dist',        format: 'amd'    }}

9、Rollup 选用原则

Rollup优势:
    输出结果更加扁平(执行效率更高)
    自动移除未引用的代码
    打包结果依然完全可读(和手写代码一致)

Rollup缺点:
    加载非ESM的第三方模块比较复杂(需要配置一大堆插件)
    模块最终都被打包到一个函数中,无法实现HMR
    浏览器环境中,代码拆分功能依赖AMD库

选用:
    开发应用程序    选用Webpack,大而全
    开发框架或类库  选用Rollup,小而美

10、Parcel

零配置的前端应用打包器

安装:

yarn add parcel-bundler --dev

运行:

yarn parcel src/index.html //index.html为入口文件

优势:
支持自动安装依赖 支持动态导入 相同体量下,Parcel比Webpack打包要快,因为Parcel使用的是多进程同时工作,充分发挥了多核CPU的性能(Webpack也可以使用happypack插件实现多进程)

关于“Rollup入门实例代码分析”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“Rollup入门实例代码分析”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注编程网行业资讯频道。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯