Shulou(Shulou.com)06/02 Report--

This article mainly explains "how to understand the Rollup in the front end of web". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to understand Rollup in the front end of web".

Rollup is a JavaScript module baler, which can compile small blocks of code into large blocks of complex code. The import and export of modules in its source code uses ES6 module syntax, that is, the source code needs to be written in ES6 syntax.

Comparison of rollup and webpack:

Rollup can only handle js modules, while webpack can handle any resources and treat all resources as modules.

Rollup is mostly suitable for the packaging of class libraries, the packaged code needs to be used by others, and webpack is mostly suitable for the packaging of applications.

Rollup generally does not generate additional code (except for the necessary cjs,umd headers), so the code packaged by rollup executes faster and is more readable. Because of its powerful function, webpack will generate a lot of extra code, large packaged files, slow execution and poor readability.

Rollup puts all resources in one place, loads at once, and uses tree-shake feature to eliminate unused code and reduce redundancy, while webpack splits code and loads on demand.

Installation and basic use of rollup

To use rollup, you need to install it globally, such as:

/ / Global installation of rollup

> sudonpminstall--globalrollup

After the rollup installation is complete, you can package it with the rollup command:

① rollup module entry file:

/ / enter the project root directory and package it with index.js under the src directory as the module entry

> rollup./src/index.js

At this point, you can see that the module packaging results are output directly in the console, because you do not specify which file to output the packaging results to, so the packaging results are output directly to the console.

② specifies module output,-- file

/ / output the packaging result to the bundle.js file in the current directory

> rollup./src/index.js--filebundle.js

③ specifies the packaged module output format,-- format

/ / package the module into iife format, that is, put the module into an anonymous self-executing function to execute

> rollup./src/index.js--filebundle.js--formatiife

If format is not specified, it is output to es format by default. The module output formats supported by rollup are es, cjs, amd, umd, iife, system. Cjs is the CommonJS module specification.

Thank you for reading, the above is the content of "how to understand the Rollup in the web front end". After the study of this article, I believe you have a deeper understanding of how to understand the Rollup in the web front end, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.