introduce

Rollup uses es6’s native module mechanism for building the packaging of modules. Rollup is a lighter packaging tool with a more futuristic focus. It doesn’t have built-in support for commonJS modules. This article gives a basic introduction to Rollup from a practical point of view. If you have any questions, you are welcome to discuss.

The installation

Install Rollup in your local development environment.

npm i rollup -D
Copy the code

use

The approach is very similar to WebPack, and is usually done from the command line, although in real life we often use NPM Script for packaging.

In the SRC directory there is foo.js:

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

Copy the code

And main.js as the entry file:

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

Copy the code

Package main.js at the project root using rollup:

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

Rollup packages main.js. The –o argument specifies the file name and the directory where the package will be stored. The –f argument specifies that the files packaged after the build are commonJS specification files.

Using a configuration file

Setting the behavior of rollup as a parameter on the command line is not very convenient. As with Webpack, we usually use a rollup.config.js configuration file to customize the behavior of rollup more flexibly. The above command line functions can be configured in the configuration file:

// rollup.config.js

export default {
  input: 'src/main.js',
  output: {
    file: './dist/bundle.js',
    format: 'cjs'}};Copy the code

In addition, we wrap an NPM script in package.json:

"scripts": {
    "build": "rollup -c"
}
Copy the code

The -c parameter specifies the configuration file to use when rollup is built. By default, the root directory of rollup.config.js is used.

Run the following command on the terminal:

npm run build
Copy the code

Match Babel

The rollup module mechanism is ES6 Modules, but it does not compile any other ES6 syntax. So if you’re developing with es6 syntax, you’ll also need to use Babel to help you compile your code into ES5.

With this strong need, Rollup certainly provides a solution. The first is to install Rollup-plugin-Babel, which combines rollup and Babel perfectly.

npm i -D rollup-plugin-babel
Copy the code

The configuration in rollup.config.js is as follows:

// rollup.config.js
import resolve from 'rollup-plugin-node-resolve';
import babel from 'rollup-plugin-babel';

export default {
  input: 'src/main.js',
  output: {
    file: './dist/bundle.js',
    format: 'cjs'
  }
  plugins: [
    babel({
      // babelrc: false,
      exclude: 'node_modules/**' // only transpile our source code
    })
  ]
};
Copy the code

In the Babel configuration file babelrc, the configuration is as follows:

{
  "presets": [["env", {
      "modules": false}]],"plugins": ["external-helpers"]}Copy the code

We used env, a Babel feature set, and the external-helpers plugin. Babel works with features specified in env and external-helpers. Set “modules”: false because rollup handles the ES6 module syntax and Babel handles the rest of the ES6 syntax. External-helpers: In order to avoid referencing the same “helpers” method in the header of each module, you only need to use it once in the bundle header after you build it.

Of course, we have to install before using:

npm i -D babel-preset-env babel-plugin-external-helpers
Copy the code

It also looks like you need to install Babel-Core

Compatible with commonjs

The NPM ecosystem has been thriving for many years. The CommonJS specification is the package specification for NPM. A large number of NPM packages are developed based on the CommonJS specification, so we still need to be compatible with the CommonJS module specification before we can fully support the ES6 module specification. Rollup provides the plugin rollup-plugin-Commonjs to make it easy to reference commonJS specification packages in rollup. The function of this plug-in is to convert commonJS modules into ES6 modules. Rollup-plugin-commonjs is usually used with rollup-plugin-nod-resolve, which resolves the dependent module path.

Installation:

npm install --save-dev rollup-plugin-commonjs rollup-plugin-node-resolve
Copy the code

This is configured in rollup.config.js:

// rollup.config.js
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import babel from 'rollup-plugin-babel';

export default {
  input: 'src/main.js',
  output: {
    file: './dist/bundle.js',
    format: 'cjs'
  }
  plugins: [
    resolve(),
    commonjs(),
    babel({
      exclude: 'node_modules/**' // only transpile our source code
    })
  ]
};
Copy the code

tree shaking

Tree Shaking is another core selling point of Rollup in addition to the ES6 module, which is also implemented in WebPack. The benefits of Tree Shaking are needless to say. Combined with the ES6 module, static analysis of code can more effectively eliminate redundant code and reduce the size of JS files. In a word, we should use it more often.

conclusion

Billed as the next generation packaging tool, Rollup is based on the ES6 module system and supports Tree Shaking, which is relatively lightweight in configuration. Rollup is ideal for applications at the JS library level. For applications with rich business scenarios, such as the need for various loaders to process images, CSS, and fonts, and the need to load on demand, code segmentation or WebPack is more suitable. You can choose according to the specific application scenario.