作用

Rollup 是一个用于 JavaScript 的模块打包器，它将小段代码编译成更大更复杂的东西，例如库或应用程序

特色

1.没有用到的代码在打包的时候会去掉

2.默认适用于es语法

3.output 用数组可以生成适用于多种语法的不同文件,es,cjs,iife

资料

1.github.com/rollup 各种demo，实用plugins

2.www.npmjs.com/package

打包

//package.json
"scripts": {
    "build": "rollup -c rollup.config.js"
  },

1.代码分割样板

// index.js 代码分割样板
import('./foo').then(({foo})=>{
  foo()
})

// rollup.config.js
 output:{
    dir:'./dist',
    format:'cjs'
  },

2.读取json文件

// user.json
{
  "name":"yy",
  "age":18
}

//index.js
import user from './user.json'
console.log(user)

// rollup.config.js
import json from "@rollup/plugin-json"

 plugins:[json()]

3.第三方cjs包转esm

// rollup.config.js
import commonjs from '@rollup/plugin-commonjs'
plugins:[commonjs]

4.本地代码为es6转es5

// rollup.config.js
import { babel } from '@rollup/plugin-babel';
plugins:[babel(
    {
      presets: ['@babel/preset-env']
    }
  )]

//index.js
const a=()=>{
  console.log("ccc")
}
a()

//转译结果
var a = function a() {
  console.log("ccc");
};
a();

5.第三方包引入不打入内部文件，提示用户下载第三方包

// rollup.config.js
external:['lodash'],

//package.json
"peerDependencies": {
    "lodash": "^4.17.21"
  },

6.第三方包代码打入本地文件

// rollup.config.js
import resolve from '@rollup/plugin-node-resolve'
 plugins:[resolve()]

7.打包时压缩文件

// rollup.config.js
import {terser} from "rollup-plugin-terser"
  output:[{
   file:'./dist/bundle.es.min.js',
   format:'es',
    plugins:[terser()]
  }]