An Introduction to the Rollup.js JavaScript Bundler-JS Tutorial-php.cn

Table of Contents

Clock

Home

Web Front-end

JS Tutorial

An Introduction to the Rollup.js JavaScript Bundler

尊渡假赌尊渡假赌尊渡假赌

Feb 10, 2025 pm 04:01 PM

Rollup.js: A Next-Generation JavaScript Module Bundler

An Introduction to the Rollup.js JavaScript Bundler

Rollup.js, created by Rich Harris (also the author of Svelte), is a modern JavaScript module bundler that excels at compiling multiple source files into a single optimized bundle. Unlike some all-in-one bundlers, Rollup focuses primarily on JavaScript, offering speed and customization advantages. Let's explore its key features and how to use it effectively.

Advantages of Using Rollup.js:

Simplified Development: Managing smaller, self-contained source files significantly improves development workflow.
Enhanced Code Quality: Integrates seamlessly with linters, formatters, and syntax checkers during the build process.
Tree-shaking Optimization: Intelligently removes unused code, resulting in smaller and faster bundles.
Backward Compatibility: Transpiles modern JavaScript (ES6 ) to ES5, ensuring broader browser support.
Flexible Output: Generates multiple output formats (ES5, ES6 modules, CommonJS) to suit various project needs.
Performance: Generally faster and more customizable than other bundlers, especially with complex configurations.

Installation:

Rollup.js requires Node.js v8.0.0 or later. You can install it globally:

1	`npm install rollup --global`

Copy after login

For larger teams working on Node.js projects, local installation is recommended for version consistency:

1	`npm install rollup --save-dev`

Copy after login

After local installation, use npx rollup to execute commands. Alternatively, define Rollup commands within your package.json scripts:

"scripts": {
  "watch": "npx rollup ./src/main.js --file ./build/bundle.js --format es --watch",
  "build": "npx rollup ./src/main.js --file ./build/bundle.js --format es",
  "help": "npx rollup --help"
}

Copy after login

These scripts can be run using npm run watch or npm run build. This tutorial primarily uses npx rollup for broader compatibility.

A Simple Example:

Let's create a basic digital clock example to illustrate Rollup's functionality. You can download example files from GitHub or create them manually.

src/main.js: (Main entry point)

import * as dom from './lib/dom.js';
import { formatHMS } from './lib/time.js';
 
const clock = dom.get('.clock');
 
if (clock) {
  console.log('initializing clock');
  setInterval(() => {
    clock.textContent = formatHMS();
  }, 1000);
}

Copy after login

src/lib/dom.js: (DOM utility library)

export function get(selector, doc = document) {
  return doc.querySelector(selector);
}
export function getAll(selector, doc = document) {
  return doc.querySelectorAll(selector);
}

Copy after login

src/lib/time.js: (Time formatting functions)

function timePad(n) {
  return String(n).padStart(2, '0');
}
export function formatHM(d = new Date()) {
  return timePad(d.getHours()) + ':' + timePad(d.getMinutes());
}
export function formatHMS(d = new Date()) {
  return formatHM(d) + ':' + timePad(d.getSeconds());
}

Copy after login

index.html: (HTML to display the clock)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Rollup.js testing</title>
  <meta name="viewport" content="width=device-width,initial-scale=1" />
</head>
<body>
  <h1 id="Clock">Clock</h1>
  <time class="clock"></time>
  <🎜>
  <🎜> </body>
</html>

Copy after login

Quick Start:

To bundle the code, run this command from your project's root directory:

1	`npx rollup ./src/main.js --file ./build/bundle.mjs --format iife`

Copy after login

This creates build/bundle.mjs. Note that unused functions are removed through tree-shaking. The index.html references this bundled file.

Key Rollup.js Configuration Options:

--file or -o: Specifies the output file name.
--format or -f: Defines the output format (iife, es, cjs, umd, amd, system).
--sourcemap: Generates a source map for easier debugging (use --sourcemap inline for an inline source map).
--watch or -w: Watches for file changes and automatically rebuilds.
--config or -c: Uses a configuration file (e.g., rollup.config.js).

Configuration File (rollup.config.js):

A configuration file simplifies managing multiple options and plugins. Here's an example:

1	`npm install rollup --global`

Copy after login

Run with: npx rollup --config

Plugins:

Rollup's extensibility comes from its plugin system. Common plugins include:

@rollup/plugin-node-resolve: Handles Node.js module resolution.
@rollup/plugin-commonjs: Converts CommonJS modules to ES modules.
@rollup/plugin-replace: Replaces tokens in your code during the build process.
@rollup/plugin-buble: Transpiles ES6 code to ES5 (consider alternatives for modern browser support).
rollup-plugin-terser: Minifies the output code.

Remember to install plugins using npm install <plugin-name> --save-dev</plugin-name>. Include them in the plugins array within your rollup.config.js.

Advanced Techniques:

Environment Variables: Use environment variables (e.g., NODE_ENV) to conditionally modify your build process (development vs. production).
Multiple Bundles: Configure Rollup to generate multiple bundles from different entry points.
Code Splitting: Further optimize your application by splitting code into smaller chunks loaded on demand.

Rollup.js provides a powerful and flexible way to bundle your JavaScript modules. By understanding its core features and plugin ecosystem, you can create highly optimized and maintainable JavaScript applications. Remember to consult the official Rollup.js documentation for the most up-to-date information and a comprehensive list of plugins.

The above is the detailed content of An Introduction to the Rollup.js JavaScript Bundler. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

What's New in Windows 11 KB5054979 & How to Fix Update Issues

3 weeks ago By DDD

How to fix KB5055523 fails to install in Windows 11?

2 weeks ago By DDD

InZoi: How To Apply To School And University

4 weeks ago By DDD

How to fix KB5055518 fails to install in Windows 10?

2 weeks ago By DDD

Roblox: Dead Rails – How To Summon And Defeat Nikola Tesla

4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Where is the login entrance for gmail email?

7833

Java Tutorial

1648

CakePHP Tutorial

1403

Laravel Tutorial

1300

PHP Tutorial

1240

Related knowledge

What should I do if I encounter garbled code printing for front-end thermal paper receipts? Apr 04, 2025 pm 02:42 PM

Frequently Asked Questions and Solutions for Front-end Thermal Paper Ticket Printing In Front-end Development, Ticket Printing is a common requirement. However, many developers are implementing...

Demystifying JavaScript: What It Does and Why It Matters Apr 09, 2025 am 12:07 AM

JavaScript is the cornerstone of modern web development, and its main functions include event-driven programming, dynamic content generation and asynchronous programming. 1) Event-driven programming allows web pages to change dynamically according to user operations. 2) Dynamic content generation allows page content to be adjusted according to conditions. 3) Asynchronous programming ensures that the user interface is not blocked. JavaScript is widely used in web interaction, single-page application and server-side development, greatly improving the flexibility of user experience and cross-platform development.

Who gets paid more Python or JavaScript? Apr 04, 2025 am 12:09 AM

There is no absolute salary for Python and JavaScript developers, depending on skills and industry needs. 1. Python may be paid more in data science and machine learning. 2. JavaScript has great demand in front-end and full-stack development, and its salary is also considerable. 3. Influencing factors include experience, geographical location, company size and specific skills.

Is JavaScript hard to learn? Apr 03, 2025 am 12:20 AM

Learning JavaScript is not difficult, but it is challenging. 1) Understand basic concepts such as variables, data types, functions, etc. 2) Master asynchronous programming and implement it through event loops. 3) Use DOM operations and Promise to handle asynchronous requests. 4) Avoid common mistakes and use debugging techniques. 5) Optimize performance and follow best practices.

How to achieve parallax scrolling and element animation effects, like Shiseido's official website? or: How can we achieve the animation effect accompanied by page scrolling like Shiseido's official website? Apr 04, 2025 pm 05:36 PM

Discussion on the realization of parallax scrolling and element animation effects in this article will explore how to achieve similar to Shiseido official website (https://www.shiseido.co.jp/sb/wonderland/)...

How to merge array elements with the same ID into one object using JavaScript? Apr 04, 2025 pm 05:09 PM

How to merge array elements with the same ID into one object in JavaScript? When processing data, we often encounter the need to have the same ID...

The Evolution of JavaScript: Current Trends and Future Prospects Apr 10, 2025 am 09:33 AM

The latest trends in JavaScript include the rise of TypeScript, the popularity of modern frameworks and libraries, and the application of WebAssembly. Future prospects cover more powerful type systems, the development of server-side JavaScript, the expansion of artificial intelligence and machine learning, and the potential of IoT and edge computing.

The difference in console.log output result: Why are the two calls different? Apr 04, 2025 pm 05:12 PM

In-depth discussion of the root causes of the difference in console.log output. This article will analyze the differences in the output results of console.log function in a piece of code and explain the reasons behind it. �...

See all articles