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. you 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"
}Configure webpack's resolve.alias property.
Configure webpack's resolve.extensions property.
Configure browserslist, works on both babel-preset-env and autoprefixer.
e.g.
"browserslist": [
"> 1%",
"last 2 versions"
]Configure webpack's output.publicPath property.
Configure webpack's output.path property.
Configure webpack's devtool property.
Configure webpack's CommonsChunkPlugin plugin, the format is Array.
e.g.
"commons": [
{
async: '__common',
children: true,
minChunks(module, count) {
if (pageCount <= 2) {
return count >= pageCount;
}
return count >= pageCount * 0.5;
},
},
]
Configuration to build with hash file name, and it's usually used in conjunction with the manifest.
Configure html-webpack-plugin plugin.
e.g.
"html": {
"template": "./src/index.ejs"
}
Disable CSS Modules，we do not recommend doing this.
Disable generate CSS's SourceMap.
Define an additional list of babel presets, the formatt is Array.
Define an additional list of babel plugins, the formatt is Array.
Define an additional list of file matches that need to be transformed with babel, the format is Array.
Define a list of files that need to be copied. The format is an array, and the format of the item refers to the configuration of [copy-webpack-plugin] (https://github.com/webpack-contrib/copy-webpack-plugin).
e.g.
"copy": [
{
"from": "",
"to": ""
}
]
Configure the [proxy] (https://webpack.js.org/configuration/dev-server/#devserver-proxy) property of webpack-dev-server.
e.g. proxy requests to other servers,
"proxy": {
"/api": {
"target": "http://jsonplaceholder.typicode.com/",
"changeOrigin": true,
"pathRewrite": { "^/api" : "" }
}
}
Then visit / api / users to access the data from [http://jsonplaceholder.typicode.com/users](http://jsonplaceholder.typicode.com/users].
Configure the options for [node-sass] (https://github.com/sass/node-sass#options). Note: node-sass and sass-loader dependencies must be installed in the project directory when using sass.
Configure to generate manifest.json, it's option will pass to https://www.npmjs.com/package/webpack-manifest-plugin.
e.g.
"manifest": {
"basePath": "/app/"
}
Ignore moment locale file, used to reduce the size.
Disable import () to load on demand, but bundle all the files in a single file, implement via babel-plugin-dynamic-import-node-sync.
Set specific options for certain environment. development is for dev, and production is for build.
e.g.
"extraBabelPlugins": ["transform-runtime"],
"env": {
"development": {
"extraBabelPlugins": ["dva-hmr"]
}
}Thus, extraBabelPlugins in development is ['transform-runtime', 'dva-hmr'], and ['transform-runtime'] in production.
You can temporarily configure some parameters for environment variables, including:
PORT, default 8000HOST, default localhostANALYZE, whether to analyze the output bundle inroadhog buildESLINT, setnonedisable eslint checkTSLINT, setnonedisable tslint checkCOMPRESS, setnoneto disable file compressing inroadhog buildBROWSER, setnoneto disable browser open inroadhog dev
e.g. start dev server with port 3000,
# OS X, Linux
$ PORT=3000 roadhog dev
# Windows (cmd.exe)
$ set PORT=3000&&roadhog dev
# Or use cross-env for all platforms
$ cross-env PORT=3000 roadhog devroadhog is a hero from overwatch, just like dva.
MIT