Rollup我的筆記

時間 2021-06-05

標籤 html node webpack web json 瀏覽器框架函數 requirejs 欄目 HTML 简体版

原文原文鏈接

Rollup

與webpack做用相似，Rollup更爲小巧，它僅僅是一款ESM打包器，並無其餘額外功能，html

例如自動化的插件，HMR等在Rollup中不支持node

它的誕生並非要與webpack全民競爭，只是提供一個充分利用ESM各項特性的高效打包器webpack

安裝: yarn add rollup --dev(^1.26.3)web

使用:yarn rollup ./src/index.js入口文件 --format iife --file dist/bundle.js輸出文件json

查看rollup命令yarn rollup瀏覽器

# index.js 根文件

// 導入模塊成員
import { log } from './logger'
import messages from './messages'

// 使用模塊成員
const msg = messages.hi

log(msg)

使用打包命令後，會生成 dist/bundle.js 文件框架

代碼相比webpack大量引導代碼和模塊函數，這裏的輸出很簡略清晰，沒有多餘代碼函數

輸出代碼中只會保留用到的部分，對於未引用的部分都沒有輸出，這是由於rollup默認會自動開啓tree shaking,樹搖最先在rollup中提出requirejs

# bundle.js

(function () {
  'use strict';

  const log = msg => {
    console.log('---------- INFO ----------');
    console.log(msg);
    console.log('--------------------------');
  };

  var messages = {
    hi: 'Hey Guys, I am zce~'
  };

  // 導入模塊成員

  // 使用模塊成員
  const msg = messages.hi;

  log(msg);

}());

配置文件

rollup.config.js運行在node環境中，rollup會額外處理這個文件，所以也容許使用ESMui

export default {
  input:'src/index.js', // 入口文件路徑
  output:{ // 輸出相關配置
    file:'dist/bundle.js' // 輸出文件名
    format:'iife' // 輸出格式
  }
}

執行須要經過 yarn rollup --config ，默認狀況下它是不會讀取配置文件的

指定配置名稱來打包文件 yarn rollup --config rollup.production.js

使用插件

rollup的自身功能就是esm模塊的合併打包

若是有加載其餘類型資源文件，導入Commonjs，編譯ES6+新特性等須要使用插件擴展實現

插件是Rollup惟一擴展途徑（webpack loader plugins minimizer）

例子

導入json插件，yarn add rollup-plugin-json --dev

# index.js

import { log } from './logger'
import messages from './messages'
import { name, version } from '../package.json' // 導入json

// 使用模塊成員
const msg = messages.hi

log(msg)


log(name) // 使用json
log(version)

配置rollup.config.js

import json from 'rollup-plugin-json'

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife'
  },
  plugins: [
    json() // json函數調用結果放入plugins
  ]
}

查看打包結果

(function () {
  'use strict';
  
  ...

  var name = "03-plugins"; // json會被tree shaking，只顯示引用成員
  var version = "0.1.0";

  log(name);
  log(version);

}());

加載 NPM 模塊

rollup默認只能按文件路徑的方式加載本地文件模塊，對於node_modules下的第三方模塊，並不能像webapck，經過模塊名稱導入對應模塊

yarn add rollup-plugin-node-resolve --dev能夠解決rollup使用第三方模塊名稱導入模塊的問題。

import json from 'rollup-plugin-json'
import resolve from 'rollup-plugin-node-resolve'

export defalut{
  input:'src/index.js',
  output:{
    file:'dist/bundle.js',
    format:''iife
  },
  plugins:[
    json(),
    resolve()
  ]
}

此時就能夠導入 NPM 模塊了！

例如
yarn add lodash-es 安裝一個模塊

# index.js

import _ from 'lodash-es' //引入 NPM 模塊

_.camelCase('hello world')

注意：使用 lodash-es（lodash esm版本）而不是 lodash 是由於 rollup 默認只能處理 esm 模塊，若是使用普通版本須要作額外處理

加載CommonJS模塊

yarn add rollup-plugin-commonjs --dev 爲了解決commonjs模塊打包問題

import json from 'rollup-plugin-json'
import resolve from 'rollup-plugin-node-resolve'
import commonjs from 'rollup-plugin-commonjs'

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife'
  },
  plugins: [
    json(),
    resolve(),
    commonjs()
  ]
}

此時，嘗試添加一個 commonjs 模塊文件

# cjs-module.js

module.exports = {
  foo:'bar'
}

# index.js 入口

import cjs from './cjs-module' 

console.log(cjs.foo)

注意：若是改用const cjs = requrie('./cjs-module.js') 引入，須要注意不能夠esm和commonjs兩個混用，否則require不會被解析

Code Splitting

Dynamic Imports實現按需加載，rollup內部會進行代碼拆分

# index.js

import('./logger').then(({log})=>{
  log('code splitting!')
})

此時打包會報錯，yarn rollup --config，告訴咱們代碼拆分打包，format不能使用iife模式，

由於iife會把全部模塊放在同一個函數中，相比於webpack並無引導代碼，無法實現代碼拆分，所以修改format爲amd or commonjs

執行yarn rollup --config --format amd

依然報錯，代碼分割輸出多文件trunk須要修改，file爲dir

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

    dir: 'dist',
    format: 'amd'
  }
}

多入口打包

公共部分也會提取出來做爲獨立的bundle

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

注意：多入口打包內部會自動提早公共模塊（內部會代碼拆分），就不能用iife，

amd規範沒法在瀏覽器直接引用，經過實現amd標準的庫加載（Require.js）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <!-- AMD 標準格式的輸出 bundle 不能直接引用 -->
  <!-- <script src="foo.js"></script> -->
   
  <!-- 須要 Require.js 這樣的庫 -->
  <script src="https://unpkg.com/requirejs@2.3.6/require.js" data-main="foo.js"></script>
  <!-- data-main執行入口模塊路徑 -->
</body>
</html>

用live server打開這個html

選用原則

優勢

輸出結果更加扁平
自動移除未引用代碼
打包結果依然徹底可讀

缺點

加載非 ESM 的第三方模塊比較複雜
模塊最終被打包到一個函數中，沒法實現 HMR
瀏覽器環境中，代碼拆分功能依賴 AMD 庫

若是咱們正在開發應用程序，須要大量引入第三方模塊，應用過大還要分包

若是咱們開發一個框架或者類庫，不多依賴第三方模塊，大多數知名框架/庫都在使用Rollup做爲模塊打包

Webpack大而全，Rollup小而美，應用程序用webpack，庫/框架Rollup

optimization:{
    concatenateModules:true // 抹平了rollup的優點
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。