react-beaker v2.14.0
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
Project structure (or the frontend part) should be as follow.
path/to/source +-- html +-- js | +-- entries +-- package.json (optional)
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
andpublish
, all source files with extensions.js
,.jsx
,.ts
or.tsx
will be output with extension.min.js
todist
.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
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";
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago