React Power
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:
moduleexports =input: './src'output: './dist'publicPath: '/'multi: falseignore: /shared/vendor:externals: {}babelrc: {}rules:browserslist: 'last 2 versions' '> 5%' 'ie > 8'cssModules: truehot: truehash: truehost: 'localhost'port: 3000open: 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.