2.14.0 • Published 8 years ago

react-beaker v2.14.0

Weekly downloads
174
License
-
Repository
-
Last release
8 years ago

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

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

OptionExplanationType
--hash, -hinclude chunkhash in output filenameboolean
--tsconfig, -cspecify a tsconfig.json file, instead of using the default one (generated by react-beaker)string
--publicPath, -pspecity a customized publicPath (can be access by o.webpack.publicPath later)string
--reactToolkit, -tbuild and include reactToolkit in output folderboolean
--strict, -sSet tsconfig.strict to trueboolean

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

8 years ago

2.13.0

8 years ago

2.12.4

8 years ago

2.12.3

8 years ago

2.12.2

8 years ago

2.12.0

8 years ago

2.11.4

8 years ago

2.11.3

8 years ago

2.11.2

8 years ago

2.11.1

8 years ago

2.11.0

9 years ago

2.10.8

9 years ago

2.10.7

9 years ago

2.10.6

9 years ago

2.10.5

9 years ago

2.10.4

9 years ago

2.10.3

9 years ago

2.10.2

9 years ago

2.10.1

9 years ago

2.10.0

9 years ago

2.9.2

9 years ago

2.9.1

9 years ago

2.8.0

9 years ago

2.7.1

9 years ago

2.6.0

9 years ago

2.5.1

9 years ago

2.5.0

9 years ago

2.4.0

9 years ago

2.3.0

9 years ago

2.2.0

9 years ago

2.1.0

9 years ago

2.0.0

9 years ago

1.0.0

9 years ago

0.1.10

9 years ago

0.1.9

9 years ago

0.1.8

10 years ago

0.1.7

10 years ago

0.1.6

10 years ago

0.1.5

10 years ago

0.1.4

10 years ago

0.1.3

10 years ago

0.1.2

10 years ago

0.1.1

10 years ago

0.1.0

10 years ago