[译]Rollup - 下一代 ES6 模块化打包工具 - 对 Rich Harris 的采访

• 原文地址：Rollup - Next-generation ES6 module bundler - Interview with Rich Harris
• 原文做者：SurviveJS
• 译文出自：掘金翻译计划
• 本文永久连接：github.com/xitu/gold-m…
• 译者：Raoul1996
• 校对者：Usey95、Aladdin-ADD

Rollup - 下一代 ES6 模块化打包工具 - 对 Rich Harris 的采访

鉴于浏览器目前尚不能按照“原样”解析 JavaScript 源码，因此打包这一步必不可少。将源代码编译成浏览器能够理解的形式，这是打包工具（例如 Browserify，Rollup 或者 webpack）存在的缘由。

为了深刻探讨这个话题，咱们正在采访 Rollup 的做者 Rich Harris。

我早些时候已经采访过 Rich，他一样是 UI 框架 Svelte 的做者。

你能够介绍下本身吗？

Rich Harris

我是在纽约时报调查组工做的图形编辑，身兼记者和开发者职位。在此以前，我在卫报作差很少的工做。过去个人部分职责是开发工具去让咱们用新闻的速度新建、部署项目。这个过程或许有点激进 —— Rollup， Bublé 和 Svelte 等都是那个时期的产物。

你会怎样把 Rollup 介绍给一个从未据说过它的人？

Rollup 是一个模块化的打包工具。本质上，它会合并 JavaScript 文件。并且你不须要去手动指定它们的顺序，或者去担忧文件之间的变量名冲突。它的内部实现会比说的复杂一点，可是它就是这么作的 —— 合并。

这么作的缘由是你可使用 ES2015 中新增的 import 和 export 关键字来模块化编程，这样在不少方面上更加明智。由于浏览器和 Node.js 尚未提供原生的 ES2015 module（ESM）支持，因此咱们模块必须在打包以后才能运行。

Rollup 能够打包出自执行（self-executing）的 <script> 文件，AMD 模块，Node 友好的 CommonJS 模块，UMD 模块（兼容三者），甚至是能够在 其余 项目中使用的 ESM 模块。

这是库的理想选择。实际上，大多数的 JavaScript 库（React，Vue，Angular，Glimmer，D3，Three.js，PouchDB，Moment，Most.js，Preact，Redux等）都是用 Rollup 构建的。

Rollup 是怎样工做的呢？

你给它一个入口文件 —— 一般是 index.js。Rollup 将使用 Acorn 读取解析文件 —— 将返回给咱们一种叫抽象语法树（AST）的东西。 一旦有了 AST ，你就能够发现许多关于代码的东西，好比它包含哪些 import 声明。

假设 index.js 文件头部有这样一行：

import foo from './foo.js';复制代码

这就意味着 Rollup 须要去加载，解析，分析在 index.js 中引入的 ./foo.js。重复解析直到没有更多的模块被加载进来。更重要的是，全部的这些操做都是可插拔的，因此您能够从 node_modules 中导入或者使用 sourcemap-aware 的方式将 ES2015 编译成 ES5 代码。

Rollup 和其余解决方案有何不一样？

首先，零开销。传统的打包方式是将模块封装到独立的函数中，将这些函数放进一个数组中，而后实现一个能够将这些函数从数组中取出并按需执行的 require 函数。事实证实这样打包体积和启动时间都会很糟糕。

相反，Rollup 事实上只是会合并你的代码 —— 没有任何浪费。所产生的包也能够更好的缩小。有人称之为 “做用域提高（scope hoisting）”。

其次。它把你导入的模块中的未使用代码移除。这被称为“（摇树优化）treeshaking”。没有什么确切的缘由。

值得注意的是，webpack 最新版本实现了做用域提高和摇树优化，因此它在打包体积和启动时间上遇上了 Rollup（尽管咱们仍是遥遥领先）。若是你构建的不是一个库，那么一般 webpack 是一个更好的选择，由于它有不少 Rollup 不具备的功能 —— 好比代码分割，动态导入等等。

理解工具间的差别，请阅读 “同中有异的 Webpack 与 Rollup” 或者[译] 同中有异的 Webpack 与 Rollup。

为何你要开发 Rollup 呢？

必要性。现有的工具都不够好。

几年前，我正在开发一个名叫 Ractive 的项目。构建的过程让我十分沮丧。咱们越是把代码库分解成模块，因为以前我描述的开销的缘由，构建得越大。咱们作了正确的事情可是却遭受着处罚。

因此我写了一个叫 Esperanto 的模块打包工具，而且做为单独的开源项目将其发布。瞧，咱们的打包体积缩小了，可是我并不满意。由于我读过 Jo Liss 写的关于如何设计静态分析的 ESM 可以让咱们进行摇树优化（treeshaking），然而 Esperanto 作不到这一点。

在 Esperanto 上增长摇树优化会很是困难，因此我放弃了它，并用 Rollup 从新开发。

想了解更多关于 ESM 的信息, 请阅读对 Bradley Farias 的采访.

接下来作什么？

我很乐意把 Rollup 开发到你们认为“完毕”的程度，这样我就能够不用再考虑它了。这并非一个使人兴奋的项目，由于模块打包是一个无聊至极的主题。这基本上只是水暖（plumbing）—— 必不可少但却毫无魅力可言。

固然到达那里我还有很长的路须要走，同时我还以为我有着照看社区的责任，由于我一直是 ESM 的倡导者。

如今咱们正在进入一个激动人心的地方 —— 浏览器陆续开始添加本地模块支持，并且如今 webpack 支持做用域提高，在各处使用 ESM 都会有很实在的好处。因此咱们但愿尽快看到 ESM 接管 CommonJS。（若是你还在写CommonJS，别写了！你这是在制造技术债务）.

总的来讲， Rollup 和 web 开发在将来将会是什么样子？你有哪些预测呢？

一方面，Rollup 会变得愈来愈过期。一旦浏览器提供原生的本地模块支持的时候，将会有一大类把打包（以及与之相关的一切 —— 编译，压缩等）做为一个可选而非必须的性能优化的应用。这将是 大趋势 ，尤为是对于 web 开发的新手来讲。

可是与此同时，咱们愈来愈多地使用构建流程为咱们的应用添加复杂的功能。我是这个的支持者 —— Svelte 基本上是从声明模板开始为你编写应用程序的一个编译器。并且伴随着 WASM 以及其余东西的横空出世，它只会变得更激烈。

因此有两个看起来矛盾的趋势同时发生了，看看它们怎么发展将会是颇有趣的。

您对进行 web 开发的程序员有什么建议呢？

站在其余程序员的肩膀上。读源码，经过构建一些东西来体会开发，并以此为荣而不要自满。学习基础知识，由于任何的抽象都不可能完美无缺（all abstractions are leaky）。搞清楚“任何的抽象都不可能完美无缺”的意思。关掉你的电脑，走出门外。由于大多数好戏都会在键盘以外发生。

最重要的是，采起一撮盐的编程建议（take programming advice with a pinch of salt）。 一旦有人达到别人开始要求他们提供建议的阶段，他们就忘记本身当初是新手的感受。没有人无所不知，无所不能。

接下来我应该去采访谁？

我真的很喜欢跟随跨越 JavaScript 和其余学科（例如 DataGL，WebGL，制图和动画等）的人们的工做 —— 像 Vladimir Agafonkin，Matthew Conlen，Sarah Drasner，Robert Monfera 和 Tom MacWright 这样的人。

在更普遍的 web 开发前沿，我一直喜欢和 Dylan Piercey 交流 Rill。这是一个可让你编写在浏览器中运行的 Express 风格应用的通用的路由（router），这个想法很棒。对我来讲，它达到了提升生产力而不过多限制使用者的最佳状态。

最后随意说点什么？

Rollup 很是感谢您的帮助！ 这是当此生态中至关重要的一部分，可是我没有足够的时间去给予足够的重视，对咱们的全部贡献者也是这样。若是您有兴趣提供能让数百万（甚至数十亿）网络用户受益的工具，请联系咱们。

结论

感谢您采访 Rich ！Rollup 是一个十分了不得的工具，尤为是对于库做者来讲，很是值得学习。但愿有一天咱们能够跳过整个打包步骤，那么这样会让事情简单很多。

想了解更多关于 Rollup 的信息，请阅读在线文档。你也能够在 GitHub 上找到这个项目。

2017年7月10日

---

掘金翻译计划 是一个翻译优质互联网技术文章的社区，文章来源为 掘金 上的英文分享文章。内容覆盖 Android、iOS、React、前端、后端、产品、设计 等领域，想要查看更多优质译文请持续关注 掘金翻译计划、官方微博、知乎专栏。