rollup

基本概念

简单的来说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 打完收工~~~！！！！！