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/LICENSE b/LICENSE new file mode 100644 index 0000000..ca0ebcb --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +The MIT License (MIT) + +Copyright (c) 2016 Davy Duperron + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/README.md b/README.md new file mode 100644 index 0000000..45ddbe4 --- /dev/null +++ b/README.md @@ -0,0 +1,83 @@ +# buble-react-rollup-starter [![Build Status](https://travis-ci.org/yamafaktory/buble-react-rollup-starter.svg?branch=master)](https://travis-ci.org/yamafaktory/buble-react-rollup-starter) [![npm version](https://img.shields.io/npm/v/buble-react-rollup-starter.svg?style=flat)](https://www.npmjs.com/package/buble-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 [Bublé](https://buble.surge.sh/guide/) 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 Bublé. + +To sum up and give an overview of what can be achieved like a breath of fresh air: + +```JavaScript +// Import React, ReactDOM and the component. +import React from 'react' +import ReactDOM from 'react-dom' +import { DummyComponent } from './components/dummy-component.js' + +// 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! + +Please not that this starter project [doesn't use JSX templates which are not currently handled by Bublé](https://gitlab.com/Rich-Harris/buble/issues/26). If you really want JSX to be part of your workflow, please give [babel-react-rollup-starter](https://github.com/yamafaktory/babel-react-rollup-starter) a try! + +## 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/buble-react-rollup-starter +cd buble-react-rollup-starter +npm i +``` + +Or even better, use *npm*! + +```bash +npm i buble-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..105d666 --- /dev/null +++ b/config/dev.js @@ -0,0 +1,30 @@ +// Rollup plugins. +import buble from 'rollup-plugin-buble' +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: [ + buble(), + 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 @@ + + +
+ + +