Rollup 試煉之路

qc1iu 發布于2019-08-22 11:00 / 1842人閱讀

摘要：根據官網的解釋，是下一代模塊化工具。之后，模塊化的寫法將更加的趨勢化，我們會將以前的文件切割成多個的細小模塊。從的人數上，還是持有很大的保留意見的，所有我個人可能會在一些小型或者快速項目中做嘗試而已。

最近看到挺多次 Rollup 這個詞，再也架不住好奇，簡單的學習實踐了一下。完整項目庫地址請戳。

PS: ES6 對應 ES2015，請忽略這些細節。

什么是 Rollup

Rollup Github 地址。根據官網的解釋，Rollup 是下一代 ES6 模塊化工具。ES6 之后，模塊化的寫法將更加的趨勢化，我們會將以前的文件切割成多個的細小模塊。那么如何來高效的組織管理這些文件，又有了很多不同的方案。現有的模塊化打包已經有如
Browserify 和 Webpack ，那為啥還需要一個新的呢？

優勢在哪

可以生成 AMD，CMD，UMD 甚至 ES6 模塊文件。

Tree-shaking

tree-shaking(有知道中文怎么翻譯的同學歡迎留言告知一下)，大致意思就是打包的時候會移除未使用到的 ES6 exports模塊。想要更深入的了解 tree-shaking 的話，可以看下博士的這篇文章Tree-shaking with webpack 2 and Babel 6。

話題轉回來，Rollup 正是使用了 ES6 的模塊特性，所以會使打包后的文件體積更小。如果是 CommonJS 的則需要先通過插件轉為 ES6 后處理。

對了，值得多說一句的是，Rollup 打包后的代碼沒有 require，import的，而是直接插入到文件中。

如何引用

Rollup 支持 CLI 和 JS API 方式，同時提供了一些插件如解決壓縮 babel 轉換等問題。(PS: 此處講解采用 API 的方式)

首先在項目根目錄創建 rollup.js 文件，安裝 npm 的相關依賴

var rollup = require("rollup");
var babel = require("rollup-plugin-babel");
var uglify = require("rollup-plugin-uglify");

rollup.rollup({
    entry: "src/index.js",
    plugins: [
        babel({
            exclude: "node_modules/**",
            presets: [ "es2015-rollup" ]
        }),
        uglify()
    ]
}).then(function(bundle) {
    bundle.write({
        // output format - "amd", "cjs", "es6", "iife", "umd"
        format: "umd",
        moduleName: "dqSystem",
        sourceMap: true,
        dest: "dqSystem.js"
    });
});

rollup 方法可以配置一些入口文件，依賴插件等，返回的是 bundle 的 Promise 方法。bundle 方法中可以配置文件相關參數，同時也可以生成多份版本文件。具體的 API 參考官網

使用 node rollup.js 執行打包。另外 Rollup 好像還不支持 watch 的配置，我采用了 npm-watch 的方式跳過了。

采過的坑

試用時間不長，且內容比較簡單，可能沒碰到一些奇怪的點

Rollup.js 中可以 catch 下 error 方便調試錯誤

UMD/IIFE 模式中需要moduleName

Rollup 的模塊引用只支持 ES6 Module，其他的需要采用 npm 和 commonjs 的插件去解決

自己YY下

不知道拿 Rollup 和 webpack 相比合不合適。我個人還是挺喜歡 webpack 的打包方式的，關鍵是功能強大，不過相比，配置也巨復雜。而 Rollup 的配置就簡單很多了。實驗的項目文件不大，所以沒看出來兩者在壓縮體積上是否有明顯的差異。Rollup 的tree-shaking也將會在 webpack2 中支持。所以好像并沒有什么一定非它不可的感覺。

套用朋友說的一句話，“任何產品的生命周期都得看社區的活躍程度”。從 github 的 fock 人數上，還是持有很大的保留意見的，所有我個人可能會在一些小型或者快速項目中做嘗試而已。

參考文章

Rollup Github

Tree-shaking with webpack 2 and Babel 6

GPU云服務器云服務器 ROLLUP 我的世界云之海服務器無限試煉我的世界云之海服務器無盡試煉寶藏網絡之路

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/91606.html

Python--Redis實戰：第一章：初識Redis：第三節：你好Redis-文章投票試煉

摘要：為了防止用戶對同一篇文章進行多次投票，網站需要為每一篇文章記錄一個已投票用戶名單。上一篇文章實戰第一章初識第二節數據結構簡介下一篇文章實戰第二章使用構建應用第一節登錄和緩存上一篇文章： Python--Redis實戰：第一章：初識Redis：第二節：Redis數據結構簡介下一篇文章：Python--Redis實戰：第二章：使用Redis構建Web應用：第一節：登錄和cookie緩存 ...

Meils 2019-07-30 18:01 評論0 收藏0
webpack2-update之路

摘要：重要特性枚舉特性增加了對特性的支持。重要特性另一個就是基于靜態模塊分析僅支持標準寫法。這樣之后整體只能通過的方式。另外在使用過程中默認是將和轉為所以需要關閉預設功能。這樣做的目的就是為了項目工程化實現大項目的分工協作提高開發效率。引言這里是webpack official提供的一到二的升級指南,二兼容一的寫法,給我的感覺是二的寫法更規范,使用起來也比較簡潔。重要特性枚舉特性1 ...

elva 2019-08-21 11:38 評論0 收藏0
2017-07-07 前端日報

摘要：前端日報精選了解中的全局對象和全局作用域張鑫旭鑫空間鑫生活子進程你應該知道的一切直出內存泄露問題的追查實踐我他喵的到底要怎樣才能在生產環境中用上模塊化騰訊前端大會大咖說大咖干貨，不再錯過發布發布中文翻譯在使用進行本地開發代碼 2017-07-07 前端日報精選了解JS中的全局對象window.self和全局作用域self ? 張鑫旭-鑫空間-鑫生活Node.js 子進程：你應該知道...

import. 2019-08-20 17:48 評論0 收藏0
rollup文檔翻譯中文文檔

摘要：既可以通過一個配置文件使用命令行接口來調用，也可以他自己的使用。使用最簡單的方法就是通過命令行接口。命令縮寫會以監視模式運行。這時運行下將不會有錯誤拋出，包含導入的組件。介紹概覽 rollup是一個js打包器，用來將很細碎的js編譯打包成大的復雜的東西，像是一個庫或者一個應用。其使用了ES6自帶的新標準來格式化和打包js代碼，而不是原先的Commonjs或者AMD這類解決方案。ES...

enrecul101 2019-08-20 17:31 評論0 收藏0