Rollup processing and Packaging JS file project instances

About Rollup

Rollup is a build tool for ES6 Module packaging code (supports CSS and JS packaging). When we use the ES6 module to write an application or library, it can be packaged as a separate file for use by the browser and node. js. It has the following advantages:

1. Can combine our script files.
2. Remove unused code (using only the ES6 syntax).
3. The use of Node modules is supported in the browser.
4. Compress the file code to minimize the size of the file.

The main advantage of rollup is that it is based on the ES2015 module, which is more efficient than the COMMONJS module used by Webpack or browserify, because Rollup uses a feature called tree-shaking to remove unused code from the module. This means that when we refer to a library, we use only one section of the library code, it does not pack all the code in, and just package the code used (webpack2.0+ seems to have introduced tree-shaking).

Note: The rollup only supports tree-shaking features in the ES6 module. jquery, currently written in accordance with the COMMONJS module, cannot be supported by tree-shaking.

Rollup's application Scenario

Now popular packaging has gulp and webpack, then compared with the previous two, I think rollup more suitable for Packaging JS Library, but for the whole application of packaging a project, I think webpack more suitable, such as packaging some pictures, fonts and other resource files, Webpack is a good fit.

How to use this project

Project Address: GitHub

To download the project file via GitHub, navigate to the project root in the command line tool, then enter the NPM install installation module and enter one of the following commands:

1. Listen for file changes and package files by entering the following command at the command line

NPM Run Dev

2. Complete the package by entering the following command at the command line

NPM Run Build

Rollup processing and Packaging JS file project instances