来源：前端漫谈

 特色介绍

 1.Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码

 2.支持ES6  

 3.支持Tree Shaking 

 4.可打包js库，也可管理App code 

 5.代码拆分和运行时态的动态导入，存在不足，推荐webpack 

 6.通过插件CommonJS 和 node-resolve ，支持将Commonjs 转为 ES模块

 7.支持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.js

js 文件

#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;