特色介紹

Rollup 是一個 JavaScript 模組打包器，可以將小塊程式碼編譯成大塊複雜的程式碼 支援ES6 支援Tree Shaking 可打包js庫，也可管理App code 程式碼拆分和執行時態的動態匯入，存在不足，推薦webpack 通過外掛CommonJS 和 node-resolve ，支援將Commonjs 轉為 ES模組 支援Typescript

使用

前提node已安裝

rollup安裝

全域性安裝

 npm install --global rollup # npm i rollup -g

本地安裝

 npm install rollup --save-dev # yarn -D add rollup

本地執行

 npx 在npm中攜帶的 npx rollup -c

使用scripts配置

"scripts": {    "build:dev" :" rollup -c"  }

呼叫方式

* CI

本節重點

* js api

rollup-starter-lib

* App 整合

rollup-starter-app

打包方式

* 運行於瀏覽器

# compile to a <script> containing a self-executing function ('iife')$ rollup main.js --file bundle.js --format iife

* node上執行

# compile to a CommonJS module ('cjs')$ rollup main.js --file bundle.js --format cjs

* 都支援

# UMD format requires a bundle name$ rollup main.js --file bundle.js --format umd --name "myBundle"

CI

輸出到檔案bundle.jsjs 檔案

 #main.jimport foo from './foo'export default function(){    console.log(foo);}

# foo.jsexport default 'hello rollup'

ci 打包

$ rollup main.js -o bundle.js -f cjs

新增配置檔案rollup.config.js控制打包

export default {  input: 'main.js',  output: {    file: 'bundle.js',    format: 'cjs'  }};

打包

# --config 簡寫-crollup -c​​# 指定不同配置rollup -c rollup.config.dev.jsrollup -c rollup.config.prod.js​​# 覆蓋配置rollup -c -o bundle-2.js -f iife

打包後bundle，是一個commonjs模組

'use strict';​​var foo = 'hello rollup';​​function main(){    console.log(foo);}​​module.exports = main;