• Stars
    star
    223
  • Rank 171,646 (Top 4 %)
  • Language
    JavaScript
  • Created over 4 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

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

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

More Repositories

1

flexbugs

A community-curated list of flexbox issues and cross-browser workarounds for them.
13,644
star
2

solved-by-flexbox

A showcase of problems once hard or impossible to solve with CSS alone, now made trivially easy with Flexbox.
CSS
13,023
star
3

html-inspector

HTML Inspector is a code quality tool to help you and your team write better markup. It's written in JavaScript and runs in the browser, so testing your HTML has never been easier.
JavaScript
2,317
star
4

analyticsjs-boilerplate

Examples and best practices for using analytics.js
JavaScript
1,124
star
5

responsive-components

A modern approach to styling elements based on the size of their container
JavaScript
584
star
6

webpack-esnext-boilerplate

JavaScript
516
star
7

polyfill

A library to make creating CSS polyfills much easier.
JavaScript
295
star
8

blog

The source code for https://philipwalton.com
JavaScript
180
star
9

private-parts

A simple and intuitive way to shim private methods and properties in JavaScript.
JavaScript
105
star
10

mozart

A full-featured, classical inheritance library for Node.js and the browser.
JavaScript
84
star
11

easy-sauce

Easily run JavaScript unit tests on the Sauce Labs cloud.
JavaScript
73
star
12

talks

HTML
46
star
13

dom-utils

A small, modular DOM utility library
JavaScript
35
star
14

import-maps-caching-demos

Demos showing how to use Import Maps to prevent cascading cache invalidations
JavaScript
21
star
15

selectable

Easily get and set the text selection with an HTML element.
JavaScript
15
star
16

router

A simple router that binds URLs paths and patterns to functions.
JavaScript
7
star
17

rollup-built-in-modules

A demo of using rollup with built-in modules
JavaScript
7
star
18

shimr

A proof-of-concept for building CSS polyfills
JavaScript
6
star
19

dotfiles

OS X dotfiles, config, bash, git, etc.
Vim Script
6
star
20

google-analytics-browser-stats

JavaScript
5
star
21

deep-watch

Exactly like fs.watch, but with sub-directory support.
JavaScript
5
star
22

ingen

JavaScript
5
star
23

slide-deck

HTML
4
star
24

handbrake

JavaScript
3
star
25

dev

HTML
3
star
26

navigation-event-proposal

3
star
27

solarized-dark-minimalist-syntax

CSS
3
star
28

deeplinker

JavaScript
2
star
29

usage-trends

JavaScript
2
star
30

github-stars

JavaScript
1
star
31

yore

Async and error handling sugar on top of the HTML5 History api.
JavaScript
1
star
32

rollup-3245-repro

JavaScript
1
star
33

photo-validator

JavaScript
1
star
34

philipwalton.github.io

GitHub pages root
HTML
1
star