babel-react-rollup-starter

7.0.0 verified Mon Apr 27 auth: no javascript

A boilerplate for web apps combining React, Babel, and Rollup. Version 7.0.0 is the latest stable release. This starter uses Rollup for bundling with Babel for transpilation, includes Browsersync for development, and enforces StandardJS linting. It provides separate configurations for development and production, with UglifyJS minification in production. Alternative to Webpack-based starters, focusing on Rollup's smaller bundle sizes and simpler configuration.

Common errors

error Error: Cannot find module 'rollup' ↓

cause Missing local rollup dependency

fix

Run 'npm install' to install all dependencies.

error Error: 'NODE_ENV' is not recognized ↓

cause Environment variable not set correctly in production build

fix

Use cross-env or update rollup config to set NODE_ENV=production.

error Browsersync not opening browser ↓

cause Browsersync open option set to false or browser not found

fix

Check Browsersync config in package.json; ensure open: true or specify browser.

Warnings

breaking Requires Node.js >=6.0.0 ↓

fix Update Node.js to version 6 or higher.

deprecated Uses UglifyJS for minification; recommended to switch to Terser ↓

fix Replace UglifyJS plugin with rollup-plugin-terser.

gotcha Production build creates a single bundle in dist/ but does not automatically open browser ↓

fix Manually open html/index.html after build.

gotcha StandardJS linting is enforced; code must adhere to its rules or builds may fail ↓

fix Run npm run lint to check and fix issues.

Install

npm install babel-react-rollup-starter

yarn add babel-react-rollup-starter

pnpm add babel-react-rollup-starter

Imports

React
```
import React from 'react'
```
Default import from react package.
ReactDOM
wrong
```
const ReactDOM = require('react-dom')
```
correct
```
import ReactDOM from 'react-dom'
```
CommonJS require is not recommended for bundling with Rollup; prefer ES module import.

Component

wrong

import Component from 'react'

correct

import { Component } from 'react'

Named import for Component class.

Quickstart

Cloning the template, installing dependencies, starting development with Browsersync, and building for production.

// Clone repo and install dependencies
git clone https://github.com/yamafaktory/babel-react-rollup-starter.git
cd babel-react-rollup-starter
npm install

// Start development server with live reload
npm start

// Build for production
npm run build