成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Rollup 試煉之路

qc1iu / 1848人閱讀

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

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

PS: ES6 對應(yīng) ES2015,請忽略這些細(xì)節(jié)。

什么是 Rollup

Rollup Github 地址。根據(jù)官網(wǎng)的解釋,Rollup 是下一代 ES6 模塊化工具。ES6 之后,模塊化的寫法將更加的趨勢化,我們會將以前的文件切割成多個的細(xì)小模塊。那么如何來高效的組織管理這些文件,又有了很多不同的方案?,F(xiàn)有的模塊化打包已經(jīng)有如
BrowserifyWebpack ,那為啥還需要一個新的呢?

優(yōu)勢在哪

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

Tree-shaking

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

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

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

如何引用

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

首先在項目根目錄創(chuàng)建 rollup.js 文件,安裝 npm 的相關(guān)依賴

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 方法可以配置一些入口文件,依賴插件等,返回的是 bundlePromise 方法。bundle 方法中可以配置文件相關(guān)參數(shù),同時也可以生成多份版本文件。具體的 API 參考官網(wǎng)

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

采過的坑

試用時間不長,且內(nèi)容比較簡單,可能沒碰到一些奇怪的點

Rollup.js 中可以 catcherror 方便調(diào)試錯誤

UMD/IIFE 模式中需要moduleName

Rollup 的模塊引用只支持 ES6 Module,其他的需要采用 npmcommonjs 的插件去解決

自己YY下

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

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

參考文章

Rollup Github

Tree-shaking with webpack 2 and Babel 6

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/91606.html

相關(guān)文章

  • Python--Redis實戰(zhàn):第一章:初識Redis:第三節(jié):你好Redis-文章投票試煉

    摘要:為了防止用戶對同一篇文章進(jìn)行多次投票,網(wǎng)站需要為每一篇文章記錄一個已投票用戶名單。上一篇文章實戰(zhàn)第一章初識第二節(jié)數(shù)據(jù)結(jié)構(gòu)簡介下一篇文章實戰(zhàn)第二章使用構(gòu)建應(yīng)用第一節(jié)登錄和緩存 上一篇文章: Python--Redis實戰(zhàn):第一章:初識Redis:第二節(jié):Redis數(shù)據(jù)結(jié)構(gòu)簡介下一篇文章:Python--Redis實戰(zhàn):第二章:使用Redis構(gòu)建Web應(yīng)用:第一節(jié):登錄和cookie緩存 ...

    Meils 評論0 收藏0
  • webpack2-update之路

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

    elva 評論0 收藏0
  • 2017-07-07 前端日報

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

    import. 評論0 收藏0
  • rollup文檔翻譯 中文文檔

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

    enrecul101 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<