Roadhog is a cli tool with dev、build and test commands. It's based on react-dev-utils and is consistent with the experience of create-react-app. You can imagine this is a configurable version of create-react-app.
- 📦 out of the box React application development tools, built-in css-modules, babel, postcss, HMR, etc.
- 🐠 create-react-app experience
- 🚨 webpack configuration in JSON format
- 🔥 mock
- ✂️ test based on jest, ui test with enzyme
## Install globally or locally
$ npm i roadhog -g
## Check version
$ roadhog -v
2.0.0
## Local development
$ roadhog dev
## Build
$ roadhog build
$ NO_COMPRESS=1 roadhog build
## Test
$ roadhog testroadhog dev support mock, configured in .roadhogrc.mock.js.
e.g.
export default {
// Support type as Object and Array
'GET /api/users': { users: [1,2] },
// Method like GET or POST can be omitted
'/api/users/1': { id: 1 },
// Support for custom functions, the API is the same as express@4
'POST /api/users/create': (req, res) => { res.end('OK'); },
};Files in the public directory would be copied to the output directory (by default ./dist) on the dev and build. So favicon, iconfont, html, html quoted pictures could be stored here.
roadhog's webpack part is based on the af-webpack's implementation. For configuration, create .webpackrc in the project root. The format is JSON, e.g.
{
"externals": { "react": "window.React" }
}If you prefer JS configuration, or need to do some programming or abstract judgment, you can use .webpackrc.js configuration file, support ES6 syntax, e.g.
export default {
externals: { react: 'window.React' },
}Index:
- entry
- theme
- define
- externals
- alias
- extraResolveExtensions
- browserslist
- publicPath
- outputPath
- devtool
- commons
- hash
- html
- disableCSSModules
- disableCSSSourceMap
- extraBabelPresets
- extraBabelPlugins
- extraBabelIncludes
- copy
- proxy
- sass
- manifest
- ignoreMomentLocale
- disableDynamicImport
- env
Specify webpack entries, support glob format.
suppose your project is multipages, wanting files in src/pages as entries. your can do the followings.
"entry": "src/pages/*.js"
Configure the theme, in fact, with less variables. Support both object and string type, the string needs to point to a file which return configurations.
e.g.
"theme": {
"@primary-color": "#1DA57A"
}
or,
"theme": "./theme-config.js"
Pass to code through the webpack's DefinePlugin plugin, the value will automatically be processed with JSON.stringify.
e.g.
"define": {
"process.env.TEST": 1,
"USE_COMMA": 2,
}Configure webpack's [externals] (https://webpack.js.org/configuration/externals/) property.
e.g.
// Don't pack react and react-dom
"externals": {
"react": "window.React",
"react-dom": "window.ReactDOM"
}