This is the first day of my participation in Gwen Challenge

Lynne, a front-end development engineer who can cry, love and laugh forever. In the Internet wave, love life and technology.

The purpose of this series is:

  1. Interested in building tools, and recently started researching packaging tools from Rollup;

  2. There was a toolbank project that chose rollup as the packaging tool for the technology selection.

Always is from 0 to 1 bit by bit, just take this opportunity to open this series on the one hand to urge themselves to record what they have learned, on the one hand, also hope to have a discussion with you, based on the author’s limited ability, hope to read the friends not stingy comments, praise and criticism are received ~~~

1. Rollup

1. What is rollup

When choosing a tool, there must be some capability, so how does rollup stand out for our development?

Not to be kept in suspense, it is light, fast and small. Tree-shaking! A detailed analysis of tree-shaking can be found in this article – Where does the useless Code Go? Tree-shaking project rollup

But a little more nonsense, and a little more rollup in my eyes

Rollup is a JavaScript module wrapper that compiles small pieces of code into large, complex pieces of code, such as libraries or applications.

This is a required capability for any packaging tool, so what’s different and what’s good about Rollup? Or, if you’re familiar with build tools, rollup is a cliche.

However, from Webpack2.x gradually implementing rollup’s tree-shaking capabilities through plug-ins, to the recently popular Vite build tools leveraging rollup’s packaging capabilities, Vue and React are also rollup packages, especially when creating packages for function libraries, tool libraries, etc. Therefore, it is necessary to master rollup!

  • Rollup packages code in the ES6 standard format
  • Only js package, fast packaging speed, packaging generated package small volume
  • It has algorithmic advantages in dealing with pure code, and is suitable for developing JS libraries, as well as packaged application development

When is rollup not recommended?

  • Code Splitting is required, and Code Splitting is not supported by rollup
  • A lot of static resources to deal with, complex modularization
  • Build projects that introduce a lot of CommonJS module dependencies

I recommend Webpack or Vite. Vite is really hot these days, so I’ll check it out after ROLLup.

What did Roullup do?

Take the small pieces of code that are eliminated and compile them into large, complex pieces of code that can be run in a browser.

In more detail:

  1. Rollup’s packaging capabilities mean that projects can be broken down into smaller modules for independent development during development, reducing unexpected interactions and reducing the complexity of problem solving.

  2. Statically analyzing imports in your code and removing any code that is not actually used is tree-shaking. This allows us to use the dependency module functionality without adding additional dependencies and making the project bulky.

Quote from the official website:

Because Rollup introduces only the most basic and minimal code, it can generate libraries and applications that are lightweight, fast, and low-complexity. Because this approach is based on explicit import and export statements, it is far more efficient than simply running automatic Minifier to detect unused variables in the compiled output code.

In terms of compatibility, the rollup package output is also well supported. Front-end students can learn about JavaScript modules by themselves (this link is only for popular science).

In rollup, you can compile the file to UMD or CommonJS format and point to the currently compiled version in the main property of the package.json file. If package.json also has a module field, ES6-aware tools like rollup and WebPack 2 (and above) will import the ES6 module version directly.

How to use rollup packaging?

There are three ways to do this, and since the first is not suitable for everyday development projects, there are two main ways, one through optional configuration files and command line operations, and the other through the JS API of Rollup.

So let’s talk a little bit about these three ways.

3.1 the command line

Pure command line packaging assumes that the entry file for the application or JS library is main.js and all imports are compiled into a file called bundle.js.

The following packaging command lines vary only in format, so that the generated packaging file can run in different environments

Browser – rollup main.js –format iife –name “myBundle” –file bundle.js

Node.js – rollup main.js --format cjs --file bundle.js

Browser & node.js -rollup main.js –format umd –file bundle.js

3.2 Configuration File + CLI

This approach gets complicated when our use of command-line packaging involves introducing more packaging parameters. On the one hand, it’s hard to remember, and on the other hand it’s very error-prone to have a long string of code every time.

Again, the entry file is main.js, and all imports are compiled into a file called bundle.js. We can use configuration files to implement packaging in much cleaner code.

The key is the rollup configuration file

By default, rollup.config.js, the configuration file is an ES6 module that exposes an object that contains the options required for rollup.

Here’s an example:

// rollup.config.js import json from 'rollup-plugin-json'; Export default {input: 'SRC /main.js', // Package import file output: {file: 'bundle.js', // Package output file format: }, plugins: [json()] // Plugins: [json()]Copy the code

Then complete the packaging with package.json:

{" devDependencies ": {" rollup" : "^ 2.47.0"}, "scripts" : {" build ":" a rollup - c "}}Copy the code

3.3 JavaScript API

rollup.rollup()

Return a Promise that resolves a bundle object with different properties and methods, such as bundle.generate() and bundle.write().

rollup.watch()

Your bundle is rebuilt when a single module change is detected on disk. This function is used internally when you run Rollup from the command line with the –watch flag.

I won’t go into details for two reasons:

  • Seldom used…
  • It’s not fun to learn API, so I’ll check it out later, okay

I have only seen one actual usage scenario, refer to the debug file in the rollup source code:

// perf-debug.js loadConfig().then(async config => // get collect configuration (await rollup.rollup(config)).generate( Array.isArray(config.output) ? config.output[0] : config.output ) );Copy the code

Third, a rollupPrinciple of packagingHow to implement

That’s the next article, so I’ll paste the demo that implements the package -> rollup-demo

Iv. Series planning

Rollup series main part

  • Rollup build principles and easy workflow (next post, possibly split)

  • Rollup tree-shaking (reference where did the garbage go? Tree-shaking projects rollup

  • Plugin mechanism for rollup (planned)

  • Best practices for rollup (planned)

This series is not updated regularly, because there will be interspersed projects to take notes, yes you read it right, notes ~~~