Rollup is a compact ESM wrapper that does not support advanced features such as HMR. The purpose of rollup is to provide an efficient ESM wrapper that can only handle ESM modules by default. It takes full advantage of ESM features to build a relatively flat, high-performance library

Quick learning

  1. npm i rollup --devdownloadrollupRely on,
  2. innpm scriptsConfigure the package command line in"build": "rollup ./src/index.js --format iife --file dist/bundle.js"

/ SRC /index.js –format iife in what format, in the form of a self-calling function –file dist/bundle.js output file directory

  1. It’s enabled by defaulttree shakingThe concept of optimizing the output is also one of the earliestrollupThe resulting

Rollup configuration file

Create rollup.config.js at the root of the project. The file runs in the Node environment, but rollup handles this file in addition, so we can use ESM

Configure the package command line “build” in NPM scripts: “rollup –config” indicates that “build” can also be configured using configuration files: “Rollup –config –rollup.dev.js” is followed by the configuration file name to use different configuration files to package each environment

Rollup plugin

For additional packaging requirements, Rollup supports extensibility using plug-ins, which are the only extensibility method in rollup, unlike webPack, which has loader, Plugin, and Minimizer extensions

Here we use rollup-plugin-json, a plug-in that imports json files into the code

  1. npm i rollup-plugin-json --dev
  2. In the configuration file and in thepluginsArray, where the plugin puts the result of the call into an array

Then pass through the JS fileimportTo import,jsonEach attribute in the file can be exported as a separate export member

After packaging, the properties used in package.json are packaged in, and the unused properties are shaken off by tree

Rollup code for the introduction of NPM modules

Rollup by default only loads local modules in business code as file paths, not third-party modules in node_modules imported directly by file names, as webpack does

By using rollup-plugin-node-resolve, we can import third-party modules by importing module names in our daily development code, and package the imported and used third-party modules into the final bundle.js

NPM I rollup-plugin-node-resolve –dev

Rollup loads the CommonJS module

Rollup is designed to only handle esM module packaging, so importing commonJS into the code is not supported by default. Since a large number of third-party libraries still use CommonJS, a plugin compatible with Rollup-plugin-CommonJS is officially provided

NPM I rollup-plugin-commonjs –dev, the configuration file is as follows

This allows us to import the CommonJS module directly in our code

Node uses module.exports as an export default package, and module.export as an export export

// module.js
module.export.a = 1

// index.js webpack rollup
import * as a from './module'
console.log(a) // { a: 1, default: { a:1 } }

// index.mjs node
import * as a from './module'
console.log(a) // { default: { a:1 } }
Copy the code

Rollup code split

Umd and IIFE (self-executing functions) do not support code splitting. Self-executing functions put all modules in one function and do not have bootstrating code, which makes code splitting impossible

Implemented using dynamic import, and requires the use of AMD or CommonJS standard support code split

Dynamic import

Rollup’s multi-entry package

Multi-entry packaging internal automatic extraction of public modules, internal code splitting, can not use IIFE (self-calling function), here is amd, and corresponding to the amd format of the output file, we can not directly refer to the page, must implement the AMD standard library loading, can use the RequireJS library

Rollup or Webpack

A rollup advantages

  1. The output is flatter and the execution is more efficient
  2. Automatically remove unreferenced code tree Shaking
  3. Package results are still readable

disadvantages

  1. Loading non-EMS third-party modules is complicated and requires plug-in configuration
  2. Modules end up packaged into a function that doesn’t provide the HMR development experience
  3. In the browser environment, code splitting relies on the AMD library because code splitting must use an OUTPUT format like AMD

So when we were developing the application

  1. A large number of tripartite modules need to be introduced
  2. HMR is needed to improve the development experience
  3. As the application gets bigger, it needs to be subcontracted

These rollups are lacking, so use webPack instead

When developing third-party libraries, they are rarely used, and rollup is necessary, so choose Rollup

Webpack is big and complete, rollup is small and beautiful

Parcel

Provides an almost dumb-ass experience, building applications with just a few simple commands provided

NPM I parcel-bundler –dev this package is called parcel-bundler

Parcel allows you to package files of any type. HTML is recommended because the application runs in the browser

The parcel command not only helps us pack, it also helps us start a development server

  1. Module hot replacement is also supported
  2. Support automatic installation dependency, just need to import directly
  3. Loading other types of resource modules is also zero-configuration
  4. Dynamic import support

Pack NPX parcel build SRC /index.html Using the build command provided with Parcel tools, parcel is faster than Webpack, and parcel uses multiple processes. You can do this with a plug-in called Happypack in Webpack

Parcel and Webpack, Webapck has a better ecology and Webpack is getting better and better these two years