shiftregister-vg / buble-react-rollup-starter

A simple starter project to build cool React applications with Bublé and Rollup.

buble-react-rollup-starter

A simple starter project to build cool React applications with Bublé and Rollup.

The aim of this project is to provide a simple boilerplate to get started with React bundled as an ES2015 module via Rollup, compiled by Bublé.

To sum up and give an overview of what can be achieved like a breath of fresh air:

// Import React, ReactDOM and the DummyComponent.
import React from 'react'
import ReactDOM from 'react-dom'
import { DummyComponent } from './components/dummy-component.jsx'

// Define the root element and instantiate the DummyComponent.
const root = document.querySelector('main')
const dummyComponent = React.createElement(DummyComponent)

// Append the DummyComponent instance to the root element.
ReactDOM.render(dummyComponent, root)

Rollup will magically includes only what you need in your bundle depending on the imports!

Prerequisite

NodeJS

The easiest way to go is to use nvm and to install one of the recent NodeJS versions bundled with npm 3 by default (i.e. NodeJS >= 5.0.0).

Installation

Clone this repository.

git clone https://github.com/yamafaktory/buble-react-rollup-starter
cd buble-react-rollup-starter
npm i

Or even better, use npm!

npm i buble-react-rollup-starter

Usage

Development

A basic workflow involving Browsersync is already implemented. Running the following command will open your default browser pointing to the html/index-dev.html file. Any modification of one of the files included in the src directory will trigger a new development build and refresh your browser:

npm start

You can also generate a development build by running the following command:

npm run build:dev

Production

First run the following command:

npm run build

Then open the html/index.html file in your browser.

The Rollup production configuration file switch the NodeJS environment to production and minify the code with UglifyJS.

Linting

The code quality is checked by the JavaScript Standard Style.

License

Released under the MIT license by Davy Duperron.