基本概念
简单的来说rollup是一个Js模块打包器，可以将小块代码编译成大块复杂的代码。现在已经有很多类库都在使用 rollup 进行打包了，比如：react, vue, preact, three.js,moment, d3 等。
优点：小巧而专注
rollup和webpack的区别？
特性:
rollup 所有资源放同一个地方，一次性加载,利用 tree-shake特性来 剔除未使用的代码，减少冗余
webpack 拆分代码、按需加载 webpack2已经逐渐支持tree-shake
rollup:
1.打包你的 js 文件的时候如果发现你的无用变量，会将其删掉。
2.可以将你的 js 中的代码，编译成你想要的格式
webpack:
1.代码拆分
2.静态资源导入（如 js、css、图片、字体等）
拥有如此强大的功能，所以 webpack 在进行资源打包的时候，就会产生很多冗余的代码。
项目（特别是类库）只有 js，而没有其他的静态资源文件，使用 webpack 就有点大才小用了，因为 webpack bundle 文件的体积略大，运行略慢，可读性略低。这时候 rollup就是一种不错的解决方案
结论：对于应用使用 webpack，对于类库使用 Rollup
rollup基本用法
1.创建文件
image.png
index.js
import module from './module1'
import {fn1,fn2} from './module2'
console.log(module)
fn1()
fn2()
module1.js
export default{
name:'小明',
age:29
}
module1.js
export const fn1=()=>{
alert('fn1')
}
export const fn2=()=>{
alert('fn2')
}
2.package.json配置项
{
"name": "rollup_demo",
"version": "1.0.0",
"description": "",
"main": "rollup.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"rollup": "rollup -c rollup.config.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-plugin-external-helpers": "^6.22.0",
"babel-preset-env": "^1.7.0",
"babel-preset-latest": "^6.24.1",
"rollup": "^0.64.1",
"rollup-plugin-babel": "^3.0.7",
"rollup-plugin-node-resolve": "^3.3.0"
}
}
3.rollup.config.js配置
import babel from 'rollup-plugin-babel'
import resolve from 'rollup-plugin-node-resolve'
import { format } from 'path';
export default{
entry:'src/index.js', //入口
format:'umd', //兼容 规范 script导入 amd commonjs
plugins:[
resolve(),
babel({
exclude:'node_modules/**'
})
],
dest:'build/bundle.js'
}
4.运行 npm run rollup 打完收工~~~！！！！！
