Skip to content
A demo app showcasing the use of real JavaScript modules in production—complete with cross-browser fallbacks for legacy browsers.
JavaScript CSS HTML
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src Finalize language before initial release Aug 20, 2019
views Update index.html Aug 26, 2019
.eslintrc Initial commit Aug 19, 2019
.gitignore Initial commit Aug 19, 2019
README.md Fix incorrect port number Aug 20, 2019
clean.js Initial commit Aug 19, 2019
package-lock.json Update dependencies per security audit Aug 27, 2019
package.json Update dependencies per security audit Aug 27, 2019
rollup.config.js Fix grammar mistakes in comments Sep 14, 2019
server.js Initial commit Aug 19, 2019

README.md

Rollup Native Modules Boilerplate

A demo app showcasing the use of real JavaScript modules in production—complete with cross-browser fallbacks for legacy browsers.

The techniques used in this demo are described in the article Using Native JavaScript Modules in Production Today.

🚀  View the demo on Glitch  👉

Features

To show that this technique can work for most types of applications, this demo is a React app and includes advanced features like:

  • Babel transforms (including JSX)
  • CommonJS dependencies (e.g. react, react-dom)
  • CSS dependencies
  • Asset hashing
  • Code splitting
  • Dynamic import (w/ polyfill fallback)
  • module/nomodule fallback

To see how all these features are configured, view the Rollup config file (rollup.config.js). To see the generated output, view the public directory after building the app (see below).

Building and running the app locally

To run the app locally, clone this repo and npm install all dependencies, then run the following command:

npm start

This will start a local server at http://localhost:3000, where you can view the app.

If you want to run the app and have Rollup monitor the code for changes (and rebundle), you can run:

npm run watch

To build the app without starting the development server, run:

npm run build

development vs production mode

By default the app is started in development mode, which means the bundle output is unminified, and a nomodule bundle is not generated. You can change this by prefixing any of the above commands with NODE_ENV=production, for example:

NODE_ENV=production npm start
You can’t perform that action at this time.