An overview,

Rollup is also an ES Moudle wrapper that can package small modules in a project into whole blocks of code. So that the partition module can better run in the browser environment or nodeJS environment. Rollup is similar to Webpack, but much smaller. Webpack can do most of the front-end work with plug-ins. Rollup is simply an ESM packer with no additional functionality. Rollup does not support advanced features like HMR. Rollup’s intention was not to compete with WebPack, but to provide an efficient packer that takes full advantage of ESM features to build a relatively flat, high-performance library.

Second, get started quickly

Preparations:Installation:yarn add rollup --dev

After installation rollup will provide us with a cli program in the bin directory of node_modules that can be used to package.

Run:yarn rollup

Rollup prints help without passing any arguments. We were prompted at the beginning to use rollup correctly,You need a parameter to specify the package entry file.Run yarn rollup./ SRC /index.js

Error: We need to specify the code output format. That is, in what format you want the ESM code converted to output.Solution:yarn rollup ./src/index.js --format iife(Self-calling function format)

Packing successfully:

We can also specify the package output path with the –file method, and the package result will be printed to the file.

Command:yarn rollup ./src/index.js --file dist/bundle.js The output is packaged with almost no extra code, justSplice together the modules in our packaging process in order of their dependencies. Only the parts used are packaged in the output, and the unreferenced parts are not printed. This is becauseRollup starts tree shaking by default to optimize our packaged resultsThe concept of tree shaking was first proposed in rollup.

Rollup configuration file

Add the rollup.config.js file to the project. This file also runs in the Node environment, and rollup itself handles this configuration file in addition, so you can use es Module directly here.

Rollup use plugin

Rollup itself is simply an es Moudle package, and can be extended using plug-ins if the project has more advanced requirements, such as loading other types of resource modules, importing CommonJS modules into the code, or compiling new ECMAScript features.Plug-ins are the only way Rollup can extend.

Example: rollup-plugin-JSON plug-in

Installation:yarn add rollup-plugin-json --dev

Packaging:yarn rollup --configThe ones we use are packed in, and the ones we don’t use are shaken away by tree.

Rollup Load NPM module

Rollup can only load local modules by file path by default. Third-party modules in node_modules cannot be directly imported by object name like webpack. Rollup-plugin-node-resolve allows you to import modules directly in your code using the name of the imported module.

Installation:yarn add rollup-plugin-node-resolve --devUse:Package: You can see that LoDash is indeed packaged into the output file.The Lodash-ES version is used because rollup can only handle the ES Moudle module.

Rollup loads CommonJS module

Rollup is for es module packages only and does not support CommonJS module packages. However, most of the official NPM is exported using commonJS mode, so compatible plug-ins are required:rollup-plugin-commonjs

Installation:yarn add rollup-plugin-commonjs --dev Packing result: Packing successfully!

7. Rollup code split

The latest version of Rollup supports code splitting and is ready to useDynamic imports are used to load modules on demand. Rollup handles code splitting automatically internally.Error packing result: IIFE output format does not support code splitting. Reason: Iife (self-executing functions) puts all modules into the same module, it doesn’t have bootstrap code like WebPack, so it can’t split the code. If you want to use code splitting, you must use another standard like AMD or COMMONJS. The browser environment can only use AMD standardsAMD output standard package! Cause: Code splitting requires multiple files to be outputted. Therefore, file cannot be configured because file is the name of a single file that needs to be outputted. You can use the dir parameter.Configure dir and package againSuccess, and split two module files! An import bundle and a dynamic import corresponding bundle, both of themUse AMD standard to output.

Eight, Rollup multi-entry packaging

Rollup also enables multi-entry packaging, and the common parts of different entries are automatically extracted into a single file as a separate bundle.

You can use an input array or an object in two ways:The package results in three files, two different entry file modules and an extracted public module.In addition, note that for AMD this output format js files we can not directly reference to the page, must be implemented through the AMD standard library to load.The package results loaded normally and worked.

Ix. Selection principle of Rollup

A rollup advantage

  1. The output is flatter and the execution is more efficient
  2. Automatically removes unreferenced code
  3. The package results are still fully readable

A rollup shortcomings

  1. Loading non-ESM third-party modules is complicated and requires some plug-ins
  2. The modules end up packaged into a function that doesn’t allow for the HMR hot replace experience
  3. In the browser environment, code splitting relies on AMD libraries

In general: when we are developing an application, we must use a lot of third-party modules, use HMR hot update function to improve the development experience, and need to subcontract once the function is large. Rollup is not suitable. If you are developing a JS framework or class library, very few of your code will rely on third-party modules. Frameworks such as React and Vue use rollup as a wrapper instead of Webpack. Webpack big and complete, rollup small and beautiful!

Parcel — zero front-end packer

Create an empty project and yarn Init initializes the project. Yarn add parcel-bundler –dev Installs a parcel. Package command: yarn parcel SRC /index.html YARN parcel + Package import file.

1. Parcel not only helped us package the app, but also opened up a development server.

When the source code is modified and saved, the browser automatically refreshes and executes the latest packaging results.

2. HMR experience

3. Automatically install dependencies

Just import it normally and use it. When saved, the Parcel automatically installs the module we just imported, largely avoiding manual operations.

4. Supports loading other types of resource modules

The module in a Parcel that loads arbitrary resources is still zero-configured compared to other packers. No plug-in or loader is used, effective immediately after the error is reported!

5 support dynamic import, if the use of dynamic import will automatically split the code

6. Package in production environment mode

yarn parcel build src/index.htmlParcel is much faster than WebPack for projects of the same size because parcel uses multiple processes to work at the same time internally, maximizing the performance of a multi-core CPU. It is also available in WebpackhappypackPlugins to do this.The packaged code is compressed and the style code is extracted into a single file.

7. To summarize

Parcel was released in 2017, due to cumbersome use of WebPack and unclear official documentation. A Parcel has zero configuration and is fast to build. While a parcel is great, it is mostly packaged using WebPack for the following reasons:

  1. Webpack has a better ecology, rich extensions, and easy to locate problems
  2. Webpack is getting better and better as we go