亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

Rollup 試煉之路

qc1iu / 1895人閱讀

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

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

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

什么是 Rollup

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

優(yōu)勢在哪

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

Tree-shaking

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

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

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

如何引用

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

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

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

采過的坑

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

Rollup.js 中可以 catch 下 error 方便調(diào)試錯(cuò)誤

UMD/IIFE 模式中需要moduleName

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

自己YY下

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

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

參考文章

Rollup Github

Tree-shaking with webpack 2 and Babel 6

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

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

相關(guān)文章

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

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

    Meils 評論0 收藏0

  • webpack2-update之路

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

    elva 評論0 收藏0

  • 2017-07-07 前端日報(bào)

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

    import. 評論0 收藏0

  • rollup文檔翻譯 中文文檔

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

    enrecul101 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<