/rollupDemo

Primary LanguageJavaScript

Rollup.js introduction

This example project demonstrates how to use Rollup.js to bundle JavaScript files. It accompanies this article on SitePoint.

Requirements

Installation Steps

Clone the project then run npm install to install all dependencies.

The project provides JavaScript which shows a realtime digital clock on an HTML page. A server can be started with npm run server so you can access pages at http://localhost:8888/, e.g. http://localhost:8888/index.original.html

Rollup.js is installed locally and all configuration files are provided in the config directory.

Quick start example

Run:

npm run quickstart

or

npx rollup ./src/main.js --file ./build/bundle.js --format iife --sourcemap inline

A single build/bundle.js file is created from the source files with an inline sourcemap.

Start the server with npm run server then load http://localhost:8888/index.html

Automatic bundling

Run:

npm run quickstart:watch

or

npx rollup ./src/main.js --file ./build/bundle.js --format iife --sourcemap inline --watch --no-watch.clearScreen

JavaScript files in the src directory are automatically bundled when changes occur.

Simple configuration file

Run:

npm run simple

or

npx rollup --config ./config/rollup.simple.js

to use the ./config/rollup.simple.js configuration file which is identical to the quick start example.

Run npm run simple:watch for automatic bundling. Note that watch options can be defined in the configuration file, but --watch must still be added as a rollup command-line flag.

Development and production modes

Environment variables can be passed to the configuration file using the rollup --environment flag, e.g.

npx rollup --config ./config/rollup.devprod.js --environment NODE_ENV:development
npx rollup --config ./config/rollup.devprod.js --environment NODE_ENV:production

This configuration removes the sourcemap in production mode.

Use npm modules

Node.js npm modules can be included in bundled scripts with the node-resolve and plugin-commonjs plugins.

The day.js date library has been installed (using npm install dayjs --save-dev).

It has been used in src/main-dayjs.js which can be bundled with:

npm run nodemodule

or

npx rollup --config ./config/rollup.npm.js

Replace tokens

The Rollup.js replace plugin can replace strings. The config/rollup.replace.js configuration file defines a tokens object which replaces references in src/main-replace.js. Bundle with:

npm run replace

or

npx rollup --config ./config/rollup.replace.js

Bundle ES5 and ES6

The Buble plugin can transpile ES6 to ES5. Bundle both ES6 build/bundle.mjs and ES5 build/bundle.js scripts using:

npm run es5

or

npx rollup --config ./config/rollup.es5.js

Start the server with npm run server then load http://localhost:8888/index.es5.html. The clock now works in IE11 as well as modern browsers.

Minify output

Bundle and minify both ES6 build/bundle.mjs and ES5 build/bundle.js scripts using the Terser plugin:

npm run minify

or

npx rollup --config ./config/rollup.minify.js

Output production code

Create final minified production code:

npm run build

or

npx rollup --config ./config/rollup.minify.js --environment NODE_ENV:production

License

SitePoint's code archives and code examples are licensed under the MIT license.

Copyright © 2021 SitePoint

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.