react-beaker

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

{
    "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

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

Installation

It is recommended to install react-beaker globally.

npm install -g react-beaker

Usage

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

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

2. Commands

   # 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.

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

   For build, the extension would be .js.

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

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

   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:

<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:

<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.

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

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

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

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