preface

With the development of front-end technology, the front-end carries more and more logic. When coding, it would be a nightmare to write all the logic in a SINGLE JS file. So the idea of modularity came up. Before esModule is put forward, there are a variety of specifications AMD, CMD, UMD, CommonJS, resulting in a more troublesome reference between modules, so ES6 launched the javascript module specification esModule, the purpose is to achieve a unified.

Modularity is a great solution to our code organization problems in complex application development, but as we introduce modularity, our applications will have new problems.

• The ES Module has an environment compatibility problem. Procedure
• Many module files and frequent network requests
• It’s not just JS that needs to be modularized, other front-end resources need to be modularized (image \ CSS, etc.)

In order to solve these problems, front-end build tools were born. There are many build tools in the community, but they have only one purpose: to improve development efficiency. Different tools have different priorities, so we need to choose the right tool based on the business scenario.

This article only addresses the basic use of rollup.

Why not Webpack

If the current scenario is to develop a project, Webpack is appropriate. Webpack regards HTML, JS, CSS, images and other files as resources, and each resource file is a module file. Webpack packs all modules into a bundle according to the dependency between each module file, which is more suitable for business project packaging. And much of the code generated by WebPack packaging is not logical code we wrote, such as some of its own module loading functions, which can increase the size of the code, which is negligible for a project.

If you are developing a JS library, the complexity of Webpack and the size of the packed file is not very suitable. Rollup generates code that simply transcodes our code into the target JS and nothing else. Configuration is simple and lightweight.

Rollup basic use

The installation

1. Global installation

npm install rollup --global  or npm i rollup -g
// Execute after installation
rollup --version
// If the output is normal, the installation succeeds.
Copy the code

2, local installation

npm install rollup -D
// Execute after installation
npx rollup --version
// If the output is normal, the installation succeeds.
Copy the code

Command line packaging

The directory structure

Index.js is an entry file that relies on utils.js and is eventually packaged by rollup to generate dist/main.umd.js.

The command line

NPX rollup --file --format module specification [--name wang]// npx rollup ./src/index.js --file ./dist/main.umd.js --format umd --name wang
Copy the code

Configuration file packaging

The directory structure

Rollup.config. js configuration file, which packages different module specification packages.

export default {
    input :"./src/index.js".output:[
        {
            format:"umd".name:"wang".file:"./dist/main.umd.js"
        },
        {
            format:"cjs".file:"./dist/main.cjs.js"
        },
        {
            format:"amd".file:"./dist/main.amd.js" 
        },
        {
            format:"es".file:"./dist/main.es.js" 
        },
        {
            format:"iife".file:"./dist/main.browser.js"}}]Copy the code

When NPX rollup -c is executed, rollup matches rollup.config.js to complete packaging.

Plug-in extension

Here’s a scenario where you introduce a js third-party math.js that computes the sum of two numbers.

import {add} from "mathjs";

const sum = add(1.2);

console.log(sum);
Copy the code

If you package according to the above configuration, an error will be reported and the Add method cannot be found

The final packing result is as follows:

Plugin @rollup/plugin-node-resolve (@rollup/plugin-node-resolve, @rollup/plugin-node-resolve)

npm install @rollup/plugin-node-resolve -D
// Add the following fields to rollup.config.js
plugins: [nodeResolve()]
Copy the code

However, we still get an error when packing.

The above error means that the module is not exported. Because rollup only supports ESModules by default, other modularity specifications do not. If you want rollup to support commonJS, install @rollup/plugin-commonjs.

npm install @rollup/plugin-node-resolve -D
// rollup.config.js final configuration is as follows
plugins: [nodeResolve(),commonjs()]
Copy the code

Now execute the code again, success!

That’s the basic rollup configuration. More advanced configurations need to be researched by yourself.