react-beaker !build status

A devtool built on webpack for cutting down heavy dependencies/devDependencies of React projects.

For example, in many cases, you may need a package.json like

``javascript
{
"scripts": {
"build": "...",
"start": "...",
"watch": "...",
"publish": "...",
...
},
"dependencies": {
"react": "...",
"react-dom": "...",
"react-router": "...",
"redux": "...",
...
"other-libs": "..."
},
"devDependencies": {
"webpack": "...",
"many-webpack-plugins": "...",
"babel": "...",
"many-babel-plugins": "...",
"uglifyjs": "...",
...
}
}
`

With react-beaker, you can simply write

`javascript
{
"dependencies": {
"other-libs": "..."
}
}
`

$3

It is recommended to install react-beaker globally.

`shell
npm install -g react-beaker
`

$3

1. Project structure (or the frontend part) should be as follow.

`shell
path/to/source
+-- html
+-- js
|   +-- entries
+-- package.json (optional)
`

2. Commands

`shell
# If there is package.json in the source directory, you need to run npm install first

react-beaker watch path/to/source
react-beaker build path/to/source
react-beaker publish path/to/source
`

For watch and publish, all source files with extensions .js, .jsx, .ts or .tsx will be output with extension .min.js to dist.

`shell
path/to/source
+-- js
|   +-- entries
| +-- a.js
| +-- b.jsx
+-- dist
+-- a.min.js
+-- b.min.js
`

For build, the extension would be .js.

`shell
path/to/source
+-- js
|   +-- entries
| +-- a.js
| +-- b.jsx
+-- dist
+-- a.js
+-- b.js
`

Meanwhile, HTML source files will also be compiled to dist.

`shell
path/to/source
+-- html
| +-- app.html
+-- dist
+-- app.html
`

3. Options

|Option|Explanation|Type|
|---|---|---|
|--hash, -h| include chunkhash in output filename | boolean
|--tsconfig, -c | specify a tsconfig.json file, instead of using the default one (generated by react-beaker) | string
|--publicPath, -p | specity a customized publicPath (can be access by o.webpack.publicPath later) | string
|--reactToolkit, -t| build and include reactToolkit in output folder | boolean
|--strict, -s| Set tsconfig.strict to true | boolean

#### --hash, -c

Given the --hash flag is provided, react-beaker will include chunkhash in output filename:

`html

`
and you run react-beaker publish . -c, the output HTML will include a reference to the assets with chunkhash:

`html

`
And the project directory will looks like this:

`
path/to/source
+-- js
|   +-- entries
| +-- index.js
| +-- a.jsx
+-- dist
+-- index.88483fa4cece1dc223d5.min.js
+-- a.82d503654d047fcf5145.min.js
`

$3

#### React Stuff

You will find react-toolkit.min.js in dist, which should be included in your HTML.

`html

`

Then you are able to import the following React libraries without adding them to package.json.

`javascript
import React from "react";
import ReactDOM from "react-dom";
import Redux from "redux";
import { IndexRoute, Route, Router } from "react-router";
`

#### Source Map

Source map is enabled when using react-beaker watch.

#### CSS and Less

`javascript
import "../css/default.css";
import "../css/theme.less";
``