From 5d05a77d7ff0a4df77df5c66a47b3a5cb6a5a376 Mon Sep 17 00:00:00 2001 From: yamafaktory Date: Thu, 5 May 2016 23:07:37 +0200 Subject: [PATCH] Set up the project. --- .gitignore | 2 + .travis.yml | 14 +++++ README.md | 82 ++++++++++++++++++++++++++++++ config/dev.js | 34 +++++++++++++ config/prod.js | 13 +++++ html/index-dev.html | 13 +++++ html/index.html | 13 +++++ package.json | 67 ++++++++++++++++++++++++ src/components/dummy-component.jsx | 12 +++++ src/index.js | 12 +++++ 10 files changed, 262 insertions(+) create mode 100644 .gitignore create mode 100644 .travis.yml create mode 100644 README.md create mode 100644 config/dev.js create mode 100644 config/prod.js create mode 100644 html/index-dev.html create mode 100644 html/index.html create mode 100644 package.json create mode 100644 src/components/dummy-component.jsx create mode 100644 src/index.js diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..dd87e2d --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +node_modules +build diff --git a/.travis.yml b/.travis.yml new file mode 100644 index 0000000..f29caf8 --- /dev/null +++ b/.travis.yml @@ -0,0 +1,14 @@ +language: node_js + +node_js: + - 6.0.0 + +cache: + directories: + - node_modules + +script: + - npm run build:dev + - npm run build + +sudo: false diff --git a/README.md b/README.md new file mode 100644 index 0000000..e9c7696 --- /dev/null +++ b/README.md @@ -0,0 +1,82 @@ +# babel-react-rollup-starter [![Build Status](https://travis-ci.org/yamafaktory/babel-react-rollup-starter.svg?branch=master)](https://travis-ci.org/yamafaktory/babel-react-rollup-starter) [![npm version](https://img.shields.io/npm/v/babel-react-rollup-starter.svg?style=flat)](https://www.npmjs.com/package/babel-react-rollup-starter) [![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](http://standardjs.com/) + +> A simple starter project to build cool [React](https://facebook.github.io/react/) applications with [Babel](http://babeljs.io/) and [Rollup](http://rollupjs.org/). + +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 Babel. + +To sum up and give an overview of what can be achieved like a breath of fresh air: + +```JavaScript +// Import React and React-dom. +import React from 'react' +import ReactDOM from 'react-dom' + +// Import the components. +import { DummyComponent } from './components/dummy-component.jsx' + +// Define the root element. +const root = document.querySelector('main') + +// Append the DummyComponent to the root element. +ReactDOM.render(, 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](https://github.com/creationix/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. + +```bash +git clone https://github.com/yamafaktory/babel-react-rollup-starter +cd babel-react-rollup-starter +npm i +``` + +Or even better, use *npm*! + +```bash +npm i babel-react-rollup-starter +``` + +## Usage + +### Development + +A basic workflow involving [Browsersync](https://www.browsersync.io/) 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: + +```bash +npm test +``` + +You can also generate a development build by running the following command: + +```bash +npm run build:dev +``` + +### Production + +First run the following command: + +```bash +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](http://lisperator.net/uglifyjs/). + +## Linting + +The code quality is checked by the [JavaScript Standard Style](http://standardjs.com/). + +## License + +Released under the [MIT license](https://opensource.org/licenses/MIT) by Davy Duperron. diff --git a/config/dev.js b/config/dev.js new file mode 100644 index 0000000..006fee7 --- /dev/null +++ b/config/dev.js @@ -0,0 +1,34 @@ +// Rollup plugins. +import babel from 'rollup-plugin-babel' +import cjs from 'rollup-plugin-commonjs' +import globals from 'rollup-plugin-node-globals' +import npm from 'rollup-plugin-npm' +import replace from 'rollup-plugin-replace' +import resolve from 'rollup-plugin-node-resolve' + +export default { + dest: 'build/app.js', + entry: 'src/index.js', + format: 'iife', + plugins: [ + babel({ + babelrc: false, + exclude: 'node_modules/**', + presets: [ 'es2015-rollup', 'stage-0', 'react' ] + }), + cjs({ + exclude: 'node_modules/process-es6/**', + include: [ + 'node_modules/fbjs/**', + 'node_modules/object-assign/**', + 'node_modules/react/**', + 'node_modules/react-dom/**' + ] + }), + globals(), + npm({ main: true }), + replace({ 'process.env.NODE_ENV': JSON.stringify('development') }), + resolve({ browser: true }) + ], + sourceMap: true +} diff --git a/config/prod.js b/config/prod.js new file mode 100644 index 0000000..eb4e9e2 --- /dev/null +++ b/config/prod.js @@ -0,0 +1,13 @@ +// Rollup plugins. +import replace from 'rollup-plugin-replace' +import uglify from 'rollup-plugin-uglify' + +// Import the development configuration. +import config from './dev' + +// Inject the production settings. +config.dest = 'build/app.min.js' +config.plugins[4] = replace({ 'process.env.NODE_ENV': JSON.stringify('production') }) +config.plugins.push(uglify()) + +export default config diff --git a/html/index-dev.html b/html/index-dev.html new file mode 100644 index 0000000..39093f0 --- /dev/null +++ b/html/index-dev.html @@ -0,0 +1,13 @@ + + + + + + babel-react-rollup-starter + + +
+ + + diff --git a/html/index.html b/html/index.html new file mode 100644 index 0000000..848849b --- /dev/null +++ b/html/index.html @@ -0,0 +1,13 @@ + + + + + + babel-react-rollup-starter + + +
+ + + diff --git a/package.json b/package.json new file mode 100644 index 0000000..f8f0c1a --- /dev/null +++ b/package.json @@ -0,0 +1,67 @@ +{ + "name": "babel-react-rollup-starter", + "version": "1.0.0", + "title": "babel-react-rollup-starter", + "description": "A simple starter project to build cool React applications with Babel and Rollup.", + "keywords": [ + "Babel", + "Browsersync", + "React", + "Rollup", + "StandardJS" + ], + "homepage": "https://github.com/yamafaktory/babel-react-rollup-starter", + "author": { + "name": "Davy Duperron", + "url": "https://github.com/yamafaktory" + }, + "license": "MIT", + "repository": { + "type": "git", + "url": "https://github.com/yamafaktory/babel-react-rollup-starter" + }, + "engines": { + "npm": ">=3.0.0", + "node": ">=5.0.0" + }, + "dependencies": { + "react": "15.0.2", + "react-dom": "15.0.2" + }, + "devDependencies": { + "babel-cli": "6.7.7", + "babel-preset-es2015-rollup": "1.1.0", + "babel-preset-react": "6.5.0", + "babel-preset-stage-0": "6.5.0", + "browser-sync": "2.12.5", + "npm-run-all": "1.6.0", + "onchange": "2.2.0", + "rollup": "0.26.1", + "rollup-plugin-babel": "2.4.0", + "rollup-plugin-commonjs": "2.2.1", + "rollup-plugin-node-globals": "1.0.5", + "rollup-plugin-node-resolve": "1.5.0", + "rollup-plugin-npm": "1.4.0", + "rollup-plugin-replace": "1.1.0", + "rollup-plugin-uglify": "0.3.1", + "snazzy": "3.0.1", + "standard": "6.0.8" + }, + "scripts": { + "prebuild": "npm run std", + "build": "rollup -c config/prod.js", + "build:dev": "rollup -c config/dev.js", + "browse": "browser-sync start --s --index 'html/index-dev.html' --files 'html/**/*.html, build/**/*.js' --no-notify", + "std": "standard --verbose | snazzy", + "test": "npm-run-all --parallel watch browse", + "watch": "onchange src -- npm run build:dev", + "preversion": "git pull && npm up && npm run std", + "version": "npm run build && git add -A .", + "postversion": "git push --tags origin HEAD" + }, + "standard": { + "ignore": [ + "build" + ] + } +} diff --git a/src/components/dummy-component.jsx b/src/components/dummy-component.jsx new file mode 100644 index 0000000..c691a4a --- /dev/null +++ b/src/components/dummy-component.jsx @@ -0,0 +1,12 @@ +import React from 'react' + +export class DummyComponent extends React.Component { + render () { + return ( +
+

Hi from DummyComponent.

+ Now let's play with React! +
+ ) + } +} diff --git a/src/index.js b/src/index.js new file mode 100644 index 0000000..b48544e --- /dev/null +++ b/src/index.js @@ -0,0 +1,12 @@ +// Import React and React-dom. +import React from 'react' +import ReactDOM from 'react-dom' + +// Import the components. +import { DummyComponent } from './components/dummy-component.jsx' + +// Define the root element. +const root = document.querySelector('main') + +// Append the DummyComponent to the root element. +ReactDOM.render(, root)