Rollup 簡(jiǎn)易入門示例教程
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ù)文件路徑加載本地的文件模塊,第三方模塊不能直接通過模塊名稱去導(dǎo)入
rollup-plugin-node-resolve:安裝后Rollup可直接通過模塊名稱導(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)提取公共模塊,也就是說內(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ù)中,無法實(shí)現(xiàn)HMR
瀏覽器環(huán)境中,代碼拆分功能依賴AMD庫
選用:
開發(fā)應(yīng)用程序 選用Webpack,大而全
開發(fā)框架或類庫 選用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)文章!
相關(guān)文章
TypeScript開發(fā)HapiJS應(yīng)用詳解
這篇文章主要為大家介紹了TypeScript開發(fā)HapiJS應(yīng)用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08微信小程序?qū)崙?zhàn)之運(yùn)維小項(xiàng)目
這篇文章主要介紹了微信小程序?qū)崙?zhàn)之運(yùn)維小項(xiàng)目,就是利用微信小程序?qū)崿F(xiàn)了一個(gè)類似138的功能,輸入IP就可以查看IP的詳細(xì)信心,有需要的朋友可以參考借鑒,下面來一起看看吧。2017-01-01PureScript與JavaScript中equality設(shè)計(jì)的使用對(duì)比分析
這篇文章主要為大家介紹了PureScript中的equality與JavaScript中的equality設(shè)計(jì)對(duì)比分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11Manipulation-TypeScript?DOM操作示例解析
這篇文章主要為大家介紹了DOM?Manipulation-TypeScript?DOM操作示例解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-03-03typescript難學(xué)嗎?前端有必要學(xué)?該怎么學(xué)typescript
TypeScript代碼與?JavaScript?代碼有非常高的兼容性,無門檻,你把?JS?代碼改為?TS?就可以運(yùn)行。TypeScript?應(yīng)該不會(huì)脫離?JavaScript?成為獨(dú)立的語言。學(xué)習(xí)?TypeScript?應(yīng)該主要指的是學(xué)習(xí)它的類型系統(tǒng)。2022-12-12CKEditor4配置與開發(fā)詳細(xì)中文說明文檔
網(wǎng)上分享的CKEditor4中文說明很多都只是的部分使用方法,今天為大家分享一下比較完整的CKEditor4中文說明文檔2018-10-10數(shù)據(jù)結(jié)構(gòu)Typescript之哈希表實(shí)現(xiàn)詳解
這篇文章主要為大家介紹了數(shù)據(jù)結(jié)構(gòu)Typescript之哈希表實(shí)現(xiàn)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-01-01