@[TOC](Rollup Study Notes)

I. Understanding of Rollup

Rollup official documentation

Compare that to Webpack

• More compact, easy to use.
• Rollup enables only one ESM wrapper (by default, only ESM modules can be handled), while WebPack in conjunction with plugins can fulfill most of the front-end engineering requirements.
• The result of packing is much flatter. Packaging is packaged in tree-shaking format and automatically removes code as references

// rollup.config.js
Rollup allows the export to be exported to the ESM standard, which does the processing internally, as well as the CMJ standard.
export default {
  input: 'src/index.js'.// Specify the entry file
  output: {
    file: 'dist/bundle.js'.// Output the file name
    format: 'iife'.// Output file format}}// module.exports = {
// input: 'SRC /index.js', // specify the entry file
// output: {
// file: 'dist/bundle.js', // output filename
// format: 'iife', // Output file format
/ /}
// }
Copy the code

Use of Rollup plugin

1. rollup-plugin-json

The packaging process can be handled using JSON files in code

// rollup.config.js
// rollup uses the plugin
import json from 'rollup-plugin-json' Rollup.config. js runs in the Node environment

export default {
  input: 'src/index.js'.// Specify the entry file
  output: {
    file: 'dist/bundle.js'.// Output the file name
    format: 'iife'.// Output file format
  },
  plugins: [
    json()
  ]
}

Copy the code

2. rollup-plugin-node-resolve

The packaging process can handle exporting NPM modules in code using import

// rollup uses the plugin
import json from 'rollup-plugin-json'
import resolveNode from 'rollup-plugin-node-resolve'

export default {
  input: 'src/index.js'.// Specify the entry file
  output: {
    file: 'dist/bundle.js'.// Output the file name
    format: 'iife'.// Output file format
  },
  plugins: [
    json(),
    resolveNode()
  ]
}

Copy the code

3. rollup-plugin-commonjs

The packaging process can be handled in code directly using the CMJ module

// rollup uses the plugin
import json from 'rollup-plugin-json'
import resolveNode from 'rollup-plugin-node-resolve'
import cmj from 'rollup-plugin-commonjs'
export default {
  input: 'src/index.js'.// Specify the entry file
  output: {
    file: 'dist/bundle.js'.// Output the file name
    format: 'iife'.// Output file format
  },
  plugins: [
    json(),
    resolveNode(),
    cmj()
  ]
}

Copy the code

Rollup code split

Rollup code splitting is similar to WebPack. If we use ESM to dynamically import a module, Rollup will subcontract the code internally to load on demand.

The thing to notice is that

• If code splitting is to be used, the packaged format is to use the Amd standard in the browser environment

Error: UMD and IIFE output formats are not supported for code-splitting builds.

• Dynamic import can be divided into multiple packages. You need to use output.dir to configure the output path

[!] Error: When building multiple chunks, the “output.dir” option must be used, not “output.file”. To inline dynamic imports, set the “inlineDynamicImports” option.

// rollup uses the plugin
import json from 'rollup-plugin-json'
import resolveNode from 'rollup-plugin-node-resolve'
import cmj from 'rollup-plugin-commonjs'
export default {
  input: 'src/index.js'.// Specify the entry file
  output: {
    // file: 'dist/bundle.js', // output filename
    dir: 'dist'.format: 'amd'.// Output file format
  },
  plugins: [
    json(),
    resolveNode(),
    cmj()
  ]
}
Copy the code

4. Rollup multi-entry packing

Rollup automatically extracts the common parts into a separate package for multi-entry file packaging.

1. The implementation

// rollup uses the plugin
import json from 'rollup-plugin-json'
import resolveNode from 'rollup-plugin-node-resolve'
import cmj from 'rollup-plugin-commonjs'
export default {
  input: {
    index: 'src/index.js'.entry2: 'src/entry2.js'
  }, // Specify the entry file
  output: {
    // file: 'dist/bundle.js', // output filename
    dir: 'dist'.format: 'amd'.// Output file format
  },
  plugins: [
    json(),
    resolveNode(),
    cmj()
  ]
}

Copy the code

The results of

2. Use

The requireJs library is required to support the AMD standard

5. Selection principle of Rollup and Webpack

Disadvantages of Rollup:

• Loading non-ESM third-party modules is complicated.
• To use code splitting, you must use the AMD standard, but the AMD standard packaged results cannot be used directly in script tags, relying on third-party AMD libraries
• All modules are eventually packaged into a function, and module hot replacement cannot be done using HMP.

According to the advantages and disadvantages of Rollup && Webpack, the selection principle (rule of thumb) is

• If you need to develop libraries and frameworks, you can use Rollup as a packaging tool. Vue uses rollup as the packaging tool.
• Use WebPack if you are developing an application

Parcel

Parcel is a zero-configuration front-end application packer

Features of Parcel integration (see the official documentation for more)

• HMR
• Build the development server into the DEV environment
• Babel, CSS compression, etc
• Dynamic import with ESM automatically subcontracts
• Use a third party module in the code, will automatically help install
• The following types of resource packaging are supported
• A parcel of the same size can pack faster than webPack because it uses multiple processes to work at the same time to harness the power of a multi-core CPU computer. Webpack can also be implemented using the Happypack plug-in.

1. Run the parcel Cli command

Parcel suggests that the entry file is an index. HTML file and is packaged according to the resources referenced in the file

• Parcel + Entry file (Development environment)
• Parcel Build + Import file (production environment)
•