This is the fifth day of my participation in the November Gwen Challenge. Check out the details: The last Gwen Challenge 2021

What is a rollup

Rollup is a JavaScript module wrapper that compiles small pieces of code into large, complex pieces of code, such as libraries or applications. Rollup uses new standardized formats for code modules that are included in the ES6 version of JavaScript, rather than previous ad-hoc solutions such as CommonJS and AMD. ES6 modules allow you to use the most useful stand-alone functions in your favorite library freely and seamlessly, without having to carry around other unused code in your projects. ES6 modules will eventually be implemented natively in the browser, but the current Rollup gives you an early taste.

A rollup to fit

The easiest way to use Rollup is through the Command Line Interface (or CLI). Install Rollup globally (I’ll show you how to install Rollup in a project later to make it easier to package, but don’t worry about that for now). Enter the following on the command line:

npm install rollup --global # or `npm i rollup -g` for short
Copy the code

Now you can run the rollup command. Try it!

rollup
Copy the code

Because no parameters are passed, Rollup prints out the instructions. This has the same effect as running rollup –help or rollup -h.

Let’s create a simple project:

mkdir -p my-rollup-project/src
cd my-rollup-project
Copy the code

First, we need an entrance. Paste the following code into the new file SRC /main.js:

// src/main.js
import foo from './foo.js';
export default function () {
  console.log(foo);
}
Copy the code

Then create the foo.js module referenced by the entry file:

// src/foo.js export default 'hello world! ';Copy the code

Now you can create the bundle:

rollup src/main.js -f cjs
Copy the code

The -f option (short for –output.format) specifies the type of bundle to be created — in this case CommonJS (running in Node.js). Since no output file is specified, it is printed directly in stdout:

'use strict'; var foo = 'hello world! '; var main = function () { console.log(foo); }; module.exports = main;Copy the code

You can also save the bundle as a file as follows:

rollup src/main.js -o bundle.js -f cjs
Copy the code

We can see that the rollup pack result is very clean, perhaps a little more readable than the downstairs pack result.

Contrast webpack

Start by installing Webpack and WebPack-CLI

npm i -D webpack webpack-cli
Copy the code

or

yarn add -D webpack webpack-cli
Copy the code

Then we carry out simple packaging for analysis

Since Webpack has Tree shaking, write the code briefly.

// entry.js
var a = 1
console.log(a)
Copy the code

Packaging configuration files

// webpack.config.js
const path = require('path')

module.exports = {
    mode: 'development',
    entry: './src/main.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, './dist')
    }
}
Copy the code

Call package command

npx webpack
Copy the code

Viewing the output

Webpack5 has made a lot of improvements, and this time there are far fewer packages than usual.

We can see that __webpack_modules__ is an object with the file path as its key. And its value is our actual code.