Awesome
roadhog
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.
Docs
Features
- 📦 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
Getting started
## 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 test
Mock
roadhog 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'); },
};
Use the public directory
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.
Configuration
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
entry
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"
theme
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"
define
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,
}
externals
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"
}
alias
Configure webpack's resolve.alias property.
extraResolveExtensions
Configure webpack's resolve.extensions property.
browserslist
Configure browserslist, works on both babel-preset-env and autoprefixer.
e.g.
"browserslist": [
"> 1%",
"last 2 versions"
]
publicPath
Configure webpack's output.publicPath property.
outputPath
Configure webpack's output.path property.
devtool
Configure webpack's devtool property.
commons
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;
},
},
]
hash
Configuration to build with hash file name, and it's usually used in conjunction with the manifest.
html
Configure html-webpack-plugin plugin.
e.g.
"html": {
"template": "./src/index.ejs"
}
disableCSSModules
Disable CSS Modules,we do not recommend doing this.
disableCSSSourceMap
Disable generate CSS's SourceMap.
extraBabelPresets
Define an additional list of babel presets, the formatt is Array.
extraBabelPlugins
Define an additional list of babel plugins, the formatt is Array.
extraBabelIncludes
Define an additional list of file matches that need to be transformed with babel, the format is Array.
copy
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": ""
}
]
proxy
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].
sass
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.
manifest
Configure to generate manifest.json, it's option will pass to https://www.npmjs.com/package/webpack-manifest-plugin.
e.g.
"manifest": {
"basePath": "/app/"
}
ignoreMomentLocale
Ignore moment locale file, used to reduce the size.
disableDynamicImport
Disable import ()
to load on demand, but bundle all the files in a single file, implement via babel-plugin-dynamic-import-node-sync.
env
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.
Environment Variables
You can temporarily configure some parameters for environment variables, including:
PORT
, default 8000HOST
, default localhostANALYZE
, whether to analyze the output bundle inroadhog build
ESLINT
, setnone
disable eslint checkTSLINT
, setnone
disable tslint checkCOMPRESS
, setnone
to disable file compressing inroadhog build
BROWSER
, setnone
to 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 dev
FAQ
Why is it called roadhog ?
roadhog is a hero from overwatch, just like dva.
<img src="https://gw.alipayobjects.com/zos/rmsportal/nnuuSFhDFUOfvYSRyvBh.png" width="405" height="411" />LICENSE
MIT