node package manager
Easy sharing. Manage teams and permissions with one click. Create a free org »

react-power

React Power

Travis Status NPM LICENSE

Introduction

Command line toolkit includes full-featured scripts powered by React ecosystem.

Quickly start a web app development with none configuration, or optionally add a minimal config file when needed.

Prerequisite

Require Node.js v7.6 or later. (for async/await supporting)

Getting Started

Creates new work directory.

$ mkdir my-app
$ cd my-app

Intalls react-power with npm or yarn.

$ yarn init
$ yarn add --dev react-power

Adds scripts to package.json.

"scripts": {
  "dev": "react-power dev",
  "build": "react-power build",
  "clean": "react-power clean"
}

Writes some source code.

$ mkdir src
$ echo 'document.getElementById("root").innerHTML = "Hello world!"' > src/index.js
$ echo \
'<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>React Power</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>' \
> src/template.html

Tries running script dev, build, clean.

$ yarn run dev
$ yarn run build
$ yarn run clean

Configuration

Create a file react-power.config.js in root directory. In it, you'll configure like this:

module.exports = {
  input: './src',
  output: './dist',
  publicPath: '/',
  multi: false,
  ignore: /shared/,
  vendor: [],
  externals: {},
  babelrc: {},
  rules: [],
  browserslist: ['last 2 versions', '> 5%', 'ie > 8'],
  cssModules: true,
  hot: true,
  hash: true,
  host: 'localhost',
  port: 3000,
  open: false
}

Options Reference

Option Type Default Description
input String './src' Where react-power resolve source code.
output String './dist' Where react-power output bundles.
publicPath String '/' Specifies the public URL of the output directory when referenced in a browser.
multi Boolean false Whether is a multi page application or not.
ignore RegExp /shared/ Ignores the module name using regexp only effective when multi is true.
vendor Array Specifies the vendor modules to make them seperate from main bundle.
externals Object Provides a way of excluding dependencies from the output bundles.
babelrc Object Extends built-in babel transforming configuration.
rules Array Extends built-in loader rules configuration.
browserslist Array ['last 2 versions', '> 5%', 'ie > 8'] Declare supported environments by performing queries both applied to js and css.
cssModules Boolean true Whether enables css modules or not.
hot Boolean true Whether enables hot module replacement or not.
hash Boolean true Whether enables hash and chunkhash bundles or not.
host String 'localhost' Local development server host.
port Number 3000 Local development server port.
open Boolean false Whether open the browser immediately when bundles are finished.

Buit-in Features

babelrc

  • babel-preset-env
  • babel-preset-stage-0
  • babel-preset-react
  • react-hot-loader/babel
  • babel-plugin-transform-runtime

rules

  • babel-loader
  • json-loader
  • sass-loader
  • less-loader
  • url-loader

Examples

See more examples for usage detail.

License

Released under the MIT license.