# 介绍

rollup 是一个 ES 模块化打包工具，可以帮助我们编译小的代码到一个大的、负责的代码中，比如一个库或者一个应用程序

# 对比

我们会发现 Rollup 的定义、定位和 webpack 非常的相似：

• Rollup 也是一个模块化的打包工具，但是 Rollup 主要是针对 ES Modulej 进行打包的；
• 另外 webpacki 通常可以通过各种 loader 处理各种各样的文件，以及处理它们的依赖关系；
• rollup 更多时候是专注于处理 JavaScript 代码的（当然也可以处理 css、font、vue 等文件
• 另外 rollup 的配置和理念相对于 webpack 来说，更加的简洁和容易理解；
• 在早期 webpack 不支持 tree shaking 时，rollup. 具备更强的优势：

目前 webpack 和 rollup 分别应用在什么场景呢？

• 通常在实际项目开发过程中，我们都会使用 webpack (比如 vue、react、angularI 项目都是基于 webpack 的)
• 在对库文件进行打包时，我们通常会使用 rollup (比如 vue、react、.dayjs 源码本身都是基于 rollupl 的)；

# 优点

• rollup 开发 JavaScript 库文件时，通常使用 rollup 进行打包构建
• rollup 的优势在于：配置少，输出纯净，没有多余复杂的配置和功能
• rollup 可以创建更小的 bundle，从而提升页面的加载速度，优化性能
• rollup 具有良好的兼容性，尽管 rollup 原生支持 ES 模块，但是通过配置也可以生成 CommonJS、IIFE、UMD 和 AMD 等模块
• rollup 可以很方便的打包各种模块化规范（iife、es、amd、umd 等）

# 安装

npm i -g rollup

# 命令

rollup --init # 生成配置文件

rollup src/main.js --config rollup.config.js # 使用 rollup.config.js 打包 main.js 文件

rollup src/main.js --config rollup.config.js --watch # --watch 热启动打包

rollup src/main.js --config rollup.config.js --output dist/bundle.js #指定输出文件名称

# rollup.config.js

const commonjs = require("@rollup/plugin-commonjs") // 需要进行安装

const resolve = require("@rollup/plugin-node-resolve")

const babel = require("@babel/core");

export default {

    input: "./src/main.js",

    output: [

      {

        format:"umd",

        name:"test", //name 指明了导出到全局的变量名

        file:"dist/test.umd.js",

        globals:{ //globals 指明了外部依赖得变量，也就是我们库所依赖的外部模块

            "react":"React",

            "react-dom":"ReactDOM"

        } 

      },{

        format:"es",

        file:"dist/test.es.js"

      },{

        format:"iife",

        file:"dist/test.iife.js"

      }

    ],

    plugins:[

        commonjs(),

        resolve(),

        babel({

            babelHelpers: "bundled"

        })

    ]

}