[譯]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、前端、後端、產品、設計 等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。