文章详情

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

请输入下面的图形验证码

提交验证

短信预约提醒成功

Rollup 快速入门和配置文件

2024-12-03 03:20

关注

概述(Overview)

Rollup 是一个 JavaScript 模块打包器,可以将小块代码编译成大块复杂的代码。Rollup 对代码模块使用新的 ES Module 标准,而不是以前的社区模块化方案,如CommonJS 和 AMD。ES6 模块已经被现代化浏览器原生实现,2020 年 Vue 作者发布了 Vite ,定义为下一代前端开发与构建工具,目的是取代依赖 Webpack 打包的各种构建工具,而 Vite 的模块化工具使用的就是 Rollup。

快速入门

使用 npm install --global rollup 进行安装, 运行 rollup --help 可以查看可用的选项和参数。

帮助信息中的提示: Usage: rollup [options] 就展示了 Rollup 的基本用法。我们准备三个文件 index.js 为入口主文件, 然后使用 ES6 模块化语法引入 user.js 和 message.js 文件,并在 mian.js 中使用两个文件导出的数据内容。

  1. // ======= index.js ============ 
  2. import msg from'./message' 
  3. import {names} from'./user' 
  4.  
  5. console.log(names()) 
  6. console.log(msg) 
  7. console.log('Rollup Test Code'
  8.  
  9. // ======== message.js =========== 
  10.  
  11. exportdefault { 
  12.   hi:'Hey ' 
  13.  
  14. // ======== user.js =========== 
  15.  
  16. exportconst names = () => { 
  17.   console.log('xiling'
  18.  
  19. exportconst ages = () => { 
  20.   console.log(666) 

命令行终端执行: rollup index.js

  1. rollup index.js 
  2.  
  3. index.js → stdout... 
  4. var msg = { 
  5.   hi: 'Hey ' 
  6. }; 
  7.  
  8. const names = () => { 
  9.  console.log('xiling'); 
  10. }; 
  11.  
  12. console.log(names()); 
  13. console.log(msg); 
  14. console.log('Rollup Test Code'); 

在命令终端中,我们能看到最终打包后的编译代码被打印出来了。我们需要的是将小块的文件代码打包到一个大的文件中。想要实现效果,只需要在命令中添加指定的命令参数即可: rollup index.js --file bundle.js,生成 bundle.js 文件,代码如下:

  1. var msg = { 
  2.   hi:'Hey ' 
  3. }; 
  4.  
  5. const names = () => { 
  6.   console.log('xiling'); 
  7. }; 
  8.  
  9. console.log(names()); 
  10. console.log(msg); 
  11. console.log('Rollup Test Code'); 

我们看到打包后的代码非常简洁,就是将需要运行的代码按照顺序拼装到一起。注意,是只会保留用到的代码。这就是Rollup 最早提出的 Tree-shaking 特性,后来几乎被所有打包工具参考引入。

什么是 Tree-shaking 呢? 基本原理非常简单,Rollup 在打包的过程中, 静态分析代码中的 import,只引入最基本最精简代码,并将排除任何未实际使用的代码。所以可以生成轻量、快速,以及低复杂度的 library 和应用程序。

配置文件

我们一般在命令行中使用 Rollup。你也可以提供一份配置文件(可要可不要)来简化命令行操作,同时还能启用 Rollup 的高级特性。配置文件是一个ES6模块,它对外暴露一个对象,这个对象包含了一些 Rollup 需要的选项。通常,我们把这个配置文件叫做rollup.config.js,它通常位于项目的根目录。

注意:Rollup 本身会处理配置文件,所以可以使用 export default 语法——代码不会经过 Babel 等类似工具编译,所以只能使用所用Node.js 版本支持的 ES2015 语法。

配置选项列表:https://www.rollupjs.com/guide/big-list-of-options

  1. // rollup.config.js 
  2. exportdefault { 
  3.   // 包的入口点 (例如:你的 main.js 或者 index.js) 
  4.   input:'index.js'
  5.   // 出口配置 
  6.   output:{ 
  7.     file:'budle.js',//打包到那个文件 
  8.     format:'esm'// 生成包的格式 
  9.   } 

输入:input[string]: 'index.js' 这个包的入口点(例如:你的 main.js 或者 app.js 或者 index.js)

输出:output[object]:{}

output.file[string]: 'bundle.js' 要写入的文件。也可用于生成 sourcemaps,如果适用

output.format[string] :'iife' 生成包的格式。包格式选项可以是下面的任意一个:

amd – 异步模块定义,用于像 RequireJS 这样的模块加载器

cjs – CommonJS,适用于 Node 和 Browserify/Webpack

 

esm – 将软件包保存为 ES 模块文件,在现代浏览器中可以通过  

 

来源:勾勾的前端世界内容投诉

免责声明:

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

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

软考中级精品资料免费领

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

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

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

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

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

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

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