https://github.com/philipwalton/rollup-native-modules-boilerplate

A demo app showcasing the use of real JavaScript modules in production—complete with cross-browser fallbacks for legacy browsers.
https://github.com/philipwalton/rollup-native-modules-boilerplate

Last synced: about 2 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/philipwalton/rollup-native-modules-boilerplate
• Owner: philipwalton
• Created: 2019-08-10T18:19:02.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2024-02-11T02:20:17.000Z (7 months ago)
• Last Synced: 2024-07-18T07:46:05.270Z (2 months ago)
• Language: JavaScript
• Homepage: https://rollup-native-modules-boilerplate.glitch.me/
• Size: 1.01 MB
• Stars: 223
• Watchers: 3
• Forks: 25
• Open Issues: 16
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 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](https://philipwalton.com/articles/using-native-javascript-modules-in-production-today/).

🚀  **[View the demo on Glitch](https://rollup-native-modules-boilerplate.glitch.me/)**  👉

## 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`](/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](https://help.github.com/en/articles/cloning-a-repository) this repo and `npm install` all dependencies, then run the following command:

```sh

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:

```sh

npm run watch

```

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

```sh

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:

```sh

NODE_ENV=production npm start

```