Rollup 教程

简介

Rollup 是一个 JavaScript 模块打包器,可以将小块代码编译成大块复杂的代码,例如 library 或应用程序。Rollup 对代码模块使用ESM。ES6 模块最终还是要由浏览器原生实现,但当前 Rollup 可以使你提前体验。

Webpack 的理念是“万物皆是模块”,rollup.js 从一开始,就没有那样宏大的愿景,它描述自己是:“一个 JavaScript 模块打包器”。致力于“将小块的代码编译成大的复杂的代码”。

快速使用

Rollup 可以通过命令行接口(command line interface)配合可选配置文件(optional configuration file)来调用,或者可以通过 JavaScript API来调用。运行 rollup --help 可以查看可用的选项和参数。


安装:

npm install -g rollup


命令行使用方式:

假设应用程序入口起点的名称为 main.js,并且所有 import 的依赖(all imports)都编译到一个名为 bundle.js 的单个文件中。

生成浏览器格式(IIFE 立即调用的函数表达式):

rollup main.js --file bundle.js --format iife


生成 Node.js CommonJS module ('cjs'):

rollup main.js --file bundle.js --format cjs


生成JS通用模块模式 UMD

rollup main.js --file bundle.js --format umd --name "myBundle"


配置文件使用方式

其次我们创建一个入口并写入如下代码:

// ./src/main.js
import hello from './src/hello.js';
hello();


// ./src/hello.js
export default function(name){ 
  console.log(name) 
};

基本代码准备好了之后,我们写rollup的配置文件(rollup.config.js在根目录下):

// rollup.config.js
export default {
  input: 'src/main.js',
  output: {
    file: 'bundle.js',
    format: 'cjs'
  }
};

这样,我们在终端执行,这样就生成了一个bundle.js,就是我们想要的打包后的文件。

rollup -c



JavaScript API 的使用方式

Rollup 提供 JavaScript 接口那样可以通过 Node.js 来使用。Vite 也是使用 Rollup 做构建工具。

Rollup 提供一个函数,rollup.rollup 函数返回一个 Promise,它解析了一个 bundle 对象,此对象带有不同的属性及方法,如下:

const rollup = require('rollup');

// see below for details on the options
const inputOptions = {...};
const outputOptions = {...};

async function build() {
  // create a bundle
  const bundle = await rollup.rollup(inputOptions);

  console.log(bundle.imports); // an array of external dependencies
  console.log(bundle.exports); // an array of names exported by the entry point
  console.log(bundle.modules); // an array of module objects

  // generate code and a sourcemap
  const { code, map } = await bundle.generate(outputOptions);

  // or write the bundle to disk
  await bundle.write(outputOptions);
}

build();


附录一,命令行常用参数:

-i, --input <filename>      要打包的文件(必须)
-o, --file <output>         输出的文件 (如果没有这个参数,则直接输出到控制台)
-f, --format <format>       输出的文件类型 (amd, cjs, esm, iife, umd)
-e, --external <ids>        将模块ID的逗号分隔列表排除
-g, --globals <pairs>       以`module ID:Global` 键值对的形式,用逗号分隔开 
                              任何定义在这里模块ID定义添加到外部依赖
-n, --name <name>           生成UMD模块的名字
-h, --help                  输出 help 信息
-m, --sourcemap             生成 sourcemap (`-m inline` for inline map)
--amd.id                    AMD模块的ID,默认是个匿名函数
--amd.define                使用Function来代替`define`
--no-strict                 在生成的包中省略`"use strict";`
--no-conflict               对于UMD模块来说,给全局变量生成一个无冲突的方法
--intro                     在打包好的文件的块的内部(wrapper内部)的最顶部插入一段内容
--outro                     在打包好的文件的块的内部(wrapper内部)的最底部插入一段内容
--banner                    在打包好的文件的块的外部(wrapper外部)的最顶部插入一段内容
--footer                    在打包好的文件的块的外部(wrapper外部)的最底部插入一段内容
--interop                   包含公共的模块(这个选项是默认添加的)
-h/--help                   打印帮助文档。
-v/--version                打印已安装的Rollup版本号。
-w/--watch                  监听源文件是否有改动,如果有改动,重新打包
--silent                    不要将警告打印到控制台。


参考:

https://rollupjs.org

真诚赞赏,手留余香
赞赏
CSS
如何调整 iconfont 图标的位置和基线
2022-03-01
CSS,前端
CSS3 实现 Switch 开关
2022-03-08
ngtwewy
随机推荐
Nginx 的 location 设置
Node.js 图片处理模块 Jimp
iconfont 字体生成原理
OpenSSL 创建 Nginx 可使用自建证书
实现图片懒加载的两种方法
WordPress 按自定义排序的两种方法
Nginx 代理 Node.js 静态文件比较大无法正常显示,关键词 proxy_temp Permission denied
关于字符的一些基础知识
Koa.js 中间件 koa-body
使用 MySQL 线程池对压力测试的影响

微信联系我

夜间模式切换
回到顶部