Similar to the function of webpack, Rollup is more compact. It is just an ESM packer without other additional functions, such as automated plug-ins and HMR, which are not supported in Rollup

install

yarn add rollup --dev

Execute package command

• File: the file directory where the output is packaged
• Format: Specifies the format of the packaged output

yarn rollup ./src/index.js --file dist/bundle.js --format iife

View packaging results

(function () {
  "use strict";

  const log = (msg) => {
    console.log("---------- INFO ----------");
    console.log(msg);
    console.log("--------------------------");
  };

  var messages = {
    hi: "Hi~",
  };

  // Import module members

  // Using module members
  const msg = messages.hi;

  log(msg);
})();

Compared with webpack, there are a large number of boot codes and module functions. The output here is simple and clear. There is no redundant code. Only the used parts will be retained in the output code, and there is no output for the unreferenced parts. This is because rollup will automatically turn on tree shaking by default

configuration file

Create a file named rollup.config.js in the project and add the following code:

export default {
  input: "src/index.js",
  output: {
    file: "dist/bundle.js",
    format: "iife",
  },
};

Execute package command

yarn rollup --config rollup.config.js

Using plug-ins

rollup's own function is the merging and packaging of ESM modules. Plug in extensions are needed to load other types of resource files, import Commonjs, and compile new ES6 + features

Install corresponding plug-ins

yarn add rollup-plugin-json --dev

Modify configuration

import json from "rollup-plugin-json";

export default {
  input: "src/index.js",
  output: {
    file: "dist/bundle.js",
    format: "iife",
  },
  plugins: [json()],
};

Load npm module

rollup can only load local file modules in the way of file path by default. For node_ The third-party modules under modules cannot be imported into the corresponding modules through the module name like webapck

Rollup plugin node resolve can solve the problem that rollup imports modules using third-party module names

Installing an expansion module

yarn add rollup-plugin-node-resolve --dev

Reference NPM module

import _ from "lodash-es";

_.camelCase("hello world");

Change configuration

import json from "rollup-plugin-json";
import resolve from "rollup-plugin-node-resolve";

export default {
  input: "src/index.js",
  output: {
    file: "dist/bundle.js",
    format: "iife",
  },
  plugins: [json(), resolve()],
};

Note: lodash es (lodash esm version) is used instead of lodash because rollup can only process ESM modules by default. If you use a normal version, you need to do additional processing

import json from "rollup-plugin-json";
import resolve from "rollup-plugin-node-resolve";

export default {
  input: "src/index.js",
  output: {
    file: "dist/bundle.js",
    format: "cjs",
  },
  plugins: [json(), resolve()],
  // Indicate which modules should be considered external
  external: ["lodash"],
};

Load CommonJS module

Rollup plugin commonjs solves the problem of commonjs module packaging

Install expansion pack

yarn add rollup-plugin-commonjs --dev

Modify profile

import json from "rollup-plugin-json";
import resolve from "rollup-plugin-node-resolve";
import commonjs from "rollup-plugin-commonjs";

export default {
  input: "src/index.js",
  output: {
    file: "dist/bundle.js",
    format: "cjs",
  },
  plugins: [json(), resolve(), commonjs()],
  // Indicate which modules should be considered external
  external: ["lodash"],
};

Code Splitting

Dynamic Imports implements on-demand loading, and the code will be split inside rollup

import("./logger").then(({ log }) => {
  log("code splitting!");
});

Modify profile

• The code division output multiple files chunks need to be modified, and the file is dir
• Because iife will put all modules in the same function, compared with webpack, it has no boot code and can not split the code. Therefore, modify the format to amd or cjs

import json from "rollup-plugin-json";
import resolve from "rollup-plugin-node-resolve";
import commonjs from "rollup-plugin-commonjs";

export default {
  input: "src/index.js",
  output: {
    dir: "dist",
    format: "cjs",
  },
  plugins: [json(), resolve(), commonjs()],
  // Indicate which modules should be considered external
  external: ["lodash"],
};

Multi entry packaging

The public part will also be extracted as an independent bundle

export default {
  // input: ['src/index.js', 'src/album.js'],
  input: {
    foo: "src/index.js",
    bar: "src/album.js",
  },
  output: {
    dir: "dist",
    format: "amd",
  },
};

The amd specification cannot be referenced directly in the browser by implementing the amd standard library loading (Require.js)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <!-- AMD Output in standard format bundle Cannot be referenced directly -->
    <!-- <script src="foo.js"></script> -->

    <!-- need Require.js Such a library -->
    <script
      src="https://unpkg.com/requirejs@2.3.6/require.js"
      data-main="foo.js"
    ></script>
    <!-- data-main Execution entry module path -->
  </body>
</html>

principle

• If we are developing an application and need to introduce a large number of third-party modules, and the application is too large and needs subcontracting, we should choose webpack
• If we develop a framework or class library and rarely rely on third-party modules, we should choose Rollup. Most well-known frameworks / libraries are packaged using Rollup as a module