Rollup.js JavaScript捆绑器的简介

热门技术勘探工
198 阅读5分钟

An Introduction to the Rollup.js JavaScript Bundler

Rollup.js是来自Svelte的作者Rich Harris的下一代JavaScript模块捆绑器。它将多个源文件编译成一个捆绑文件。

其好处包括。

  • 当使用较小的、独立的源文件时，开发更容易管理
  • 在捆绑的过程中，可以对源文件进行提示、美化和语法检查
  • 树形摇动可以删除未使用的函数
  • 可以转译到ES5以实现后向兼容
  • 可以生成多个输出文件--例如，你的库可以用ES5、ES6模块和与Node.js兼容的CommonJS提供。
  • 生产捆绑程序可以被最小化，并删除日志记录

其他捆绑器选项，如webpack、Snowpack和Parcel，试图神奇地处理一切：HTML模板化、图像优化、CSS处理、JavaScript捆绑，等等。当你对默认设置感到满意时，这很有效，但自定义配置可能很困难，而且处理速度较慢。

Rollup.js主要集中在JavaScript上（尽管有HTML模板和CSS的插件）。它的选项数量令人生畏，但它很容易上手，捆绑速度也很快。本教程解释了如何在你自己的项目中使用典型的配置。

安装Rollup.js

Rollup.js需要Node.js v8.0.0或以上版本，可以用全局安装。

npm install rollup --global

这允许rollup 命令在任何包含JavaScript文件的项目目录中运行--比如PHP、WordPress、Python、Ruby或其他项目。

然而，如果你在一个更大的团队中创建一个Node.js项目，最好在本地安装Rollup.js，以确保所有开发人员都使用相同的版本。假设你在一个项目文件夹内有一个现有的Node.jspackage.json 文件，运行。

npm install rollup --save-dev

你将不能直接运行rollup 命令，但可以使用npx rollup 。另外，rollup 命令可以被添加到package.json "scripts" 部分。比如说。

"scripts": {
  "watch": "rollup ./src/main.js --file ./build/bundle.js --format es --watch",
  "build": "rollup ./src/main.js --file ./build/bundle.js --format es",
  "help": "rollup --help"
},

这些脚本可以用npm run <scriptname> 来执行--例如，npm run watch 。

下面的例子特别使用了npx rollup ，因为无论rollup 是本地安装还是全局安装，它都能发挥作用。

示例文件

示例文件和Rollup.js配置可以从GitHub下载。这是一个Node.js项目，所以在克隆后运行npm install ，并检查README.md 文件的说明。注意，Rollup.js和所有插件都是在本地安装的。

另外，你也可以在用npm init 初始化一个新的Node.js项目后手动创建源文件。下面的ES6模块创建了一个实时数字时钟，用于演示Rollup.js的处理。

src/main.js 是主要的入口点脚本。它定位一个DOM元素，每秒钟运行一个函数，将其内容设置为当前时间。

import * as dom from './lib/dom.js';
import { formatHMS } from './lib/time.js';

// get clock element
const clock = dom.get('.clock');

if (clock) {

  console.log('initializing clock');

  // update clock every second
  setInterval(() => {

    clock.textContent = formatHMS();

  }, 1000);

}

src/lib/dom.js 是一个小型的DOM工具库。

// DOM libary

// fetch first node from selector
export function get(selector, doc = document) {
  return doc.querySelector(selector);
}

// fetch all nodes from selector
export function getAll(selector, doc = document) {
  return doc.querySelectorAll(selector);
}

和src/lib/time.js ，提供时间格式化功能。

// time formatting

// return 2-digit value
function timePad(n) {
  return String(n).padStart(2, '0');
}

// return time in HH:MM format
export function formatHM(d = new Date()) {
  return timePad(d.getHours()) + ':' + timePad(d.getMinutes());
}

// return time in HH:MM:SS format
export function formatHMS(d = new Date()) {
  return formatHM(d) + ':' + timePad(d.getSeconds());
}

通过创建一个带有clock 类的HTML元素，并作为ES6模块加载脚本，可以将时钟代码添加到网页上。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Rollup.js testing</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<script type="module" src="./src/main.js"></script>
</head>
<body>

  <h1>Clock</h1>

  <time class="clock"></time>

</body>
</html>

Rollup.js提供了优化JavaScript源文件的选项。

Rollup.js快速启动

可以从项目文件夹的根部运行以下命令来处理src/main.js 和它的依赖关系。

npx rollup ./src/main.js --file ./build/bundle.js --format iife

在build/bundle.js ，会输出一个单一的脚本。它包含了所有的代码，但注意到未使用的依赖项，如src/lib/dom.js 中的getAll() 函数已经被删除。

(function () {
  'use strict';

  // DOM libary

  // fetch first node from selector
  function get(selector, doc = document) {
    return doc.querySelector(selector);
  }

  // time library

  // return 2-digit value
  function timePad(n) {
    return String(n).padStart(2, '0');
  }

  // return time in HH:MM format
  function formatHM(d = new Date()) {
    return timePad(d.getHours()) + ':' + timePad(d.getMinutes());
  }

  // return time in HH:MM:SS format
  function formatHMS(d = new Date()) {
    return formatHM(d) + ':' + timePad(d.getSeconds());
  }

  // get clock element
  const clock = get('.clock');

  if (clock) {

    console.log('initializing clock');

    setInterval(() => {

      clock.textContent = formatHMS();

    }, 1000);

  }

}());

现在可以改变HTML<script> ，以引用捆绑的文件。

<script type="module" src="./build/bundle.js"></script>

注意：type="module" 不再是必要的，所以该脚本应该可以在支持早期ES6实现的旧浏览器中工作。你还应该添加一个defer 属性，以确保脚本在DOM准备好后运行（这在ES6模块中是默认发生的）。

Rollup.js提供了许多命令行标志。下面的章节描述了最有用的选项。

Rollup.js帮助

Rollup的命令行选项可以用--help 或-h 标志查看。

npx rollup --help

Rollup.js的版本可以用--version 或-v 来输出。

npx rollup --version

输出文件

--file (或-o)标志定义了输出捆绑文件，它被设置为上面的./build/bundle.js 。如果没有指定文件，产生的捆绑文件将被发送到stdout 。

JavaScript格式化

Rollup.js提供了几个--format (或-f)选项来配置生成的bundle。

选项描述
iife在Immediately Invoked Function Expression(function () { ... }()); 块中包裹代码，这样它就不会与其他库发生冲突
es6标准ES6
cjs用于Node.js的CommonJS
umd在客户端和服务器上使用的通用模块定义
amd异步模块定义
systemSystemJS模块

除非你使用特定的模块系统，否则iife 将是客户端JavaScript的最佳选择。es6 会产生一个稍小的包，但要警惕全局变量和函数可能与其他库冲突。

输出一个源码图

源码图提供了对源码文件的参考，因此它们可以在浏览器的开发工具中被检查。这使得设置断点或在发生错误时定位问题更加容易。

通过在rollup 命令中添加一个--sourcemap 标志，可以创建一个外部源码图。

npx rollup ./src/main.js --file ./build/bundle.js --format iife --sourcemap

这将创建一个额外的./build/bundle.js.map 文件。你可以查看它，尽管它大部分是胡言乱语，不打算供人食用！你可以查看它。该地图在./build/bundle.js 的结尾处作为注释被引用。

//# sourceMappingURL=bundle.js.map

另外，你也可以用--sourcemap inline 创建一个内联源码地图。与其产生一个额外的文件，不如将源代码地图的base64编码版本附加到./build/bundle.js 。

//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY...etc...

生成源码图后，你可以加载一个引用该脚本的示例页面。打开你的开发工具，在基于Chrome的浏览器中导航到 "来源"标签，或在Firefox中导航到 "调试器"标签。你会看到原始的src 代码和行数。

观察文件并自动捆绑

--watch (或-w) 标志监视你的源文件的变化并自动构建捆绑。终端屏幕在每次运行时都会被清除，但你可以用--no-watch.clearScreen 来禁用它。

npx rollup ./src/main.js --file ./build/bundle.js --format iife --watch --no-watch.clearScreen

创建一个配置文件

命令行标志可以很快变得不方便。上面的例子已经很长了，而且你还没有开始添加插件

Rollup.js可以使用一个JavaScript配置文件来定义捆绑选项。默认名称是rollup.config.js ，它应该放在你项目的根目录下（通常是你运行rollup 的目录）。

该文件是一个ES模块，它导出一个默认对象，设置Rollup.js选项。下面的代码复制了上面使用的命令。

// rollup.config.js

export default {

  input: './src/main.js',

  output: {
    file: './build/bundle.js',
    format: 'iife',
    sourcemap: true
  }

}

注意：sourcemap: true 定义了一个外部源码图。使用sourcemap: 'inline' ，以获得一个内联源码表。

你可以通过设置--config (或-c)标志在运行rollup 时使用这个配置文件。

npx rollup --config

如果你将配置命名为除rollup.config.js 以外的其他文件，可以传递一个文件名。 当你有多个配置也许位于一个config 目录中时，这可能很实用。比如说。

npx rollup --config ./config/rollup.simple.js

继续阅读SitePoint上的Rollup.js JavaScript Bundler简介。

avatar
文章
阅读
粉丝