Nonconformist Propaganda Machine

npm

Need private packages and team management tools?Check out npm Orgs. »

react-beaker

2.14.0 • Public • Published

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

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

Keywords

none

install

npm i react-beaker

Downloadsweekly downloads

45

version

2.14.0

license

none

last publish

collaborators

  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
Report a vulnerability