react-beaker/README.md

# react-beaker ![build status](https://travis-ci.org/wizawu/react-beaker.svg)

A devtool built on webpack for cutting down heavy dependencies/devDependencies of [React](https://facebook.github.io/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": "..."
    }
}
```

### Installation

It is recommended to install `react-beaker` globally.

```shell
npm install -g react-beaker
```

### Usage

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
<script src="//public/dist/{%= o.webpack.assetsByChunkName.index %}"></script>
```
and you run `react-beaker publish . -c`, the output HTML will include a reference to the assets with chunkhash:

```html
<script src="/public/dist/a.82d503654d047fcf5145.min.js"></script>
```
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
```

### Advanced

#### React Stuff

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

```html
<script src="./react-toolkit.min.js"></script>
```

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";
```