Recently, I accidentally talked to a colleague about Rollup, a JavaScript module wrapper. In the interest of being “open source,” I’m going to talk about Rollup in a nutshell.

The official introduction

First of all, you can take a look at the Chinese official website. (Please move if you can read and write English fluently)

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 freely and seamlessly use the most useful stand-alone functions in your favorite library 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.

The official commentary is really hard to understand. Here’s what we can get:

  • Proprietary JavaScript wrapper

  • The whole for a

  • Suitable for libraries and frameworks

  • Tree shaking

The actual operation

Without further ado, let’s start by installing the rollup tool globally.

npm install -g rollup

After successful installation, intentional friends can rollup – h | | rollup — help to see it all the command line, I will not dwell on here.

Package rollup.config.js directly with the configuration file. Of course, we can also customize the package file, which exports an object through the Esmodule.

//rollup.config.js
export default {
    input
    output
    plugin
}
Copy the code

Rollup configuration files can only be used on terminals rollup –config or -c after configuration is complete.

$rollup.config.js $rollup --config # $rollup --config #Copy the code

Configuration items

Input entry file configuration, can be a string or an array.

  • String – indicates a single file package

  • Array – indicates multiple file packaging

The Output file export configuration is an object.

{

File :””,// Export file name after the file is packaged

Format :” iIFE “// Packaged file format IIFE self-executing functions CJS is commonJS specification AMD is AMD specification etc

}

It is an array. Plugins are commonly used as follows:

  • Rollup-plugin-json rollup reads a JSON file

  • Rollup-plugin-node-resolve rollup can find third-party modules

  • Rollup-plugin-commonjs Can use modules of the CommonJS specification

The code of the subcontract

If we need to use the subcontract function in the process, we need to set the output configuration item.

output:{
    dir:"dist",
    format:"amd"
}
Copy the code

Output to dist folder, using AMD specification output.

Multiple entry packing

Multi-entry packaging is also simple by setting the input to an array, where the elements are the paths of each file to be packaged.

Contrast webpack

  • Rollup can only handle JS modules, while WebPack can handle any resource and treat all resources as modules

  • Rollup is mostly used for packaging class library development

  • Rollup generally does not generate extra code (Tree shaking)

  • Rollup loads all the resources together, and WebPack can be broken up as needed

Rollup: Rollup: rollup: rollup: Rollup: Rollup: Rollup: Rollup: Rollup