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