目錄

• Rollup介紹及使用
• 1、Rollup 概述
• 2、Rollup 快速上手
• 3、Rollup 配置文件
• rollup.config.js
• 4、Rollup 使用插件
• rollup.config.js
• 5、Rollup 加載 NPM 模塊
• rollup.config.js
• 6、Rollup 加載 CommonJS 模塊
• rollup.config.js
• 7、Rollup 代碼拆分
• index.js
• rollup.config.js
• 8、Rollup 多入口打包
• rollup.config.js
• 方式1:
• 方式2:
• 9、Rollup 選用原則
• 10、Parcel

Rollup介紹及使用

1、Rollup 概述

• 僅僅是 ES Module 的打包器
• Rollup 與 Webpack 作用類似，相比于Webpack，Rollup更為小巧
• Rollup 中并不支持類似 HRM 特性

初衷：提供一個(gè)充分利用ESM(ES Module)各項(xiàng)特性的高效打包器

2、Rollup 快速上手

安裝:yarn add rolluo --dev
用法:
    yarn rollup  //不傳遞任何參數(shù)的情況下，打印Rollup的幫助信息
    yarn rollup ./src/index.js --format iife //執(zhí)行index.js文件并以iife(自調(diào)用函數(shù))的方式輸出(--format指定輸出格式)
    yarn rollup ./src/index.js --format iife --file dist/bundle.js //輸出文件到dist/bundle.js
默認(rèn)開啟chunk去掉多余代碼，優(yōu)化輸出結(jié)果

3、Rollup 配置文件

rollup.config.js

export default {
input: "src/index.js",
    output: {
file: "dist/bundle.js",
format: "iife"
    }
}

4、Rollup 使用插件

插件是Rollup的擴(kuò)展途徑

rollup.config.js

5、Rollup 加載 NPM 模塊

Rollup默認(rèn)只能根據(jù)文件路徑加載本地的文件模塊，第三方模塊不能直接通過(guò)模塊名稱去導(dǎo)入

rollup-plugin-node-resolve:安裝后Rollup可直接通過(guò)模塊名稱導(dǎo)入模塊
安裝:yarn add rollup-plugin-node-resolve --dev

rollup.config.js

import resolvefrom "rollup-plugin-node-resolve"
export default {
input: "src/index.js",
    output: {
file: "dist/bundle.js",
format: "iife"
    },
    plugins: [
resolve()
    ]
}

6、Rollup 加載 CommonJS 模塊

rollup-plugin-commonjs:因?yàn)镽ollup默認(rèn)只能處理ESM模塊，使用這個(gè)插件Rollup就可以處理CommonJS

安裝:yarn add rollup-plugin-commonjs --dev

rollup.config.js

import commonjsfrom "rollup-plugin-commonjs"
export default {
input: "src/index.js",
    output: {
file: "dist/bundle.js",
format: "iife"
    },
    plugins: [
commonjs()
    ]
}

7、Rollup 代碼拆分

運(yùn)行:yarn rollup

index.js

import("./logger").then(({ log }) => {
    log("code splitting~")
})

rollup.config.js

export default {
	input: "src/index.js",
	  output: {
	      dir: "dist",
	      format: "amd"
  }
}

8、Rollup 多入口打包

多入口打包內(nèi)部會(huì)自動(dòng)提取公共模塊，也就是說(shuō)內(nèi)部會(huì)使用代碼拆分

rollup.config.js

方式1:

export default {
input: ["src/index.js", "src/album.js"],
    output: {
dir: "dist",
format: "amd"
    }
}

方式2:

export default {
input: {
foo: "src/index.js",
bar: "src/album.js"
    },
output: {
dir: "dist",
format: "amd"
    }
}

9、Rollup 選用原則

Rollup優(yōu)勢(shì):
    輸出結(jié)果更加扁平(執(zhí)行效率更高)
    自動(dòng)移除未引用的代碼
    打包結(jié)果依然完全可讀(和手寫代碼一致)

Rollup缺點(diǎn):
    加載非ESM的第三方模塊比較復(fù)雜(需要配置一大堆插件)
    模塊最終都被打包到一個(gè)函數(shù)中，無(wú)法實(shí)現(xiàn)HMR
    瀏覽器環(huán)境中，代碼拆分功能依賴AMD庫(kù)

選用:
    開發(fā)應(yīng)用程序    選用Webpack，大而全
    開發(fā)框架或類庫(kù)  選用Rollup，小而美

10、Parcel

零配置的前端應(yīng)用打包器

安裝:

yarn add parcel-bundler --dev 

運(yùn)行:

yarn parcel src/index.html 
//index.html為入口文件 

優(yōu)勢(shì):
支持自動(dòng)安裝依賴 支持動(dòng)態(tài)導(dǎo)入 相同體量下，Parcel比Webpack打包要快，因?yàn)镻arcel使用的是多進(jìn)程同時(shí)工作，充分發(fā)揮了多核CPU的性能(Webpack也可以使用happypack插件實(shí)現(xiàn)多進(jìn)程)

以上就是Rollup 簡(jiǎn)易入門示例教程的詳細(xì)內(nèi)容，更多關(guān)于Rollup 入門教程的資料請(qǐng)關(guān)注其它相關(guān)文章！