基本介绍

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

Rollup的定义、定位和webpack非常的相似：

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

通常在实际项目开发过程中，都会使用webpack（比如vue、react、angular项目都是基于webpack的）

对库文件进行打包时，通常会使用rollup（比如vue、react、dayjs源码本身都是基于rollup的）

基本使用

npm install rollup -g

打包浏览器的库

npx rollup ./src/main.js -f iife -o dist/bundle.js

打包AMD的库

npx rollup ./src/main.js -f amd -o dist/bundle.js

打包CommonJS的库

npx rollup ./src/main.js -f cjs -o dist/bundle.js

打包通用的库（必须跟上name）

npx rollup ./src/main.js -f umd –name mathUtil

-o dist/bundle.js

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
  typeof define === 'function' && define.amd ? define(['exports'], factory) :
  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.mathUtil = {}));
})(this, (function (exports) { 'use strict';

  function foo() {
    console.log(foo);
  }

  exports.foo = foo;

}));

配置文件

rollup.config.js

module.exports = {
  input: "./src/index/js",
  output: [
    {
      format: "umd",
      name: "mathUtil",
      file: "./build/bundle.umd.js",
    },
    {
      format: "cjs",
      file: "./build/bundle.cjs.js",
    },
    {
      format: "amd",
      file: "./build/bundle.amd.js",
    },
    {
      format: "iife",
      file: "./build/bundle.iife.js",
    },
  ],
};

npx rollup -c

-c 表示按照配置文件进行打包

commonjs支持

默认Rollup对cjs模式下的代码是不打包的

安装解决commonjs的库：

npm install @rollup/plugin-commonjs -D

安装解决node_modules的库：

npm install @rollup/plugin-node-resolve -D

打包和排除lodash

module.exports = {
  input: "./src/index.js",
  output: [
    {
      format: "umd",
      name: "mathUtil",
      file: "./build/bundle.umd.js",
    },
    {
      format: "cjs",
      file: "./build/bundle.cjs.js",
    },
    {
      format: "amd",
      file: "./build/bundle.amd.js",
    },
    {
      format: "iife",
      file: "./build/bundle.iife.js",
    },
  ],
  globals: {
    lodash: "-",
  },
  external: ["lodash"],
};