Rollup 快速入门和配置文件

开发 前端
Rollup 对代码模块使用新的 ES Module 标准,而不是以前的社区模块化方案,如CommonJS 和 AMD。

[[405734]]

本文转载自微信公众号「勾勾的前端世界」,作者西岭。转载本文请联系勾勾的前端世界公众号。

概述(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 模块文件,在现代浏览器中可以通过  

 

责任编辑:武晓燕 来源: 勾勾的前端世界
相关推荐

2009-06-24 14:17:00

BackingBeanJSF配置文件

2011-02-21 10:31:54

Postfix命令配置

2021-03-12 08:00:00

Kubernetes工具

2023-08-28 09:14:20

ScrapyPython

2009-11-09 17:17:31

WCF元数据交换

2012-02-06 13:34:49

HibernateJava

2011-01-19 14:00:21

2011-01-13 16:27:26

Linux配置文件

2010-12-27 14:59:31

Outlook 配置文

2010-12-28 16:35:32

Outlook 配置文

2020-11-27 09:40:53

Rollup前端代码

2010-02-04 13:43:26

Linux vsFTP

2011-03-28 09:07:26

Nagios配置文件

2011-03-28 15:52:16

Nagios配置文件

2009-07-09 15:55:18

WebWork配置文件

2011-04-01 16:30:49

Nagios

2011-03-03 09:14:38

PureFTPd

2009-06-17 14:10:30

Spring配置文件

2009-09-22 10:23:15

Hibernate配置

2011-01-21 15:08:45

Sendmail
点赞
收藏

51CTO技术栈公众号