Rollup入門實例代碼分析

這篇文章主要介紹了Rollup入門實例代碼分析的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇Rollup入門實例代碼分析文章都會有所收獲，下面我們一起來看看吧。

Rollup介紹及使用

1、Rollup 概述

• 僅僅是 ES Module 的打包器

• Rollup 與 Webpack 作用類似，相比于Webpack，Rollup更為小巧

• Rollup 中并不支持類似 HRM 特性

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

2、Rollup 快速上手

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

3、Rollup 配置文件

rollup.config.js

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

4、Rollup 使用插件

插件是Rollup的擴展途徑

rollup.config.js

5、Rollup 加載 NPM 模塊

Rollup默認只能根據文件路徑加載本地的文件模塊，第三方模塊不能直接通過模塊名稱去導入

rollup-plugin-node-resolve:安裝后Rollup可直接通過模塊名稱導入模塊
安裝: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:因為Rollup默認只能處理ESM模塊，使用這個插件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 代碼拆分

運行: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 多入口打包

多入口打包內部會自動提取公共模塊，也就是說內部會使用代碼拆分

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優勢:
    輸出結果更加扁平(執行效率更高)
    自動移除未引用的代碼
    打包結果依然完全可讀(和手寫代碼一致)

Rollup缺點:
    加載非ESM的第三方模塊比較復雜(需要配置一大堆插件)
    模塊最終都被打包到一個函數中，無法實現HMR
    瀏覽器環境中，代碼拆分功能依賴AMD庫

選用:
    開發應用程序    選用Webpack，大而全
    開發框架或類庫  選用Rollup，小而美

10、Parcel

零配置的前端應用打包器

安裝:

yarn add parcel-bundler --dev

運行:

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

優勢:
支持自動安裝依賴 支持動態導入 相同體量下，Parcel比Webpack打包要快，因為Parcel使用的是多進程同時工作，充分發揮了多核CPU的性能(Webpack也可以使用happypack插件實現多進程)

關于“Rollup入門實例代碼分析”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“Rollup入門實例代碼分析”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。