Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/sorrycc/roadhog

🐷 Cli tool for creating react apps, configurable version of create-react-app.
https://github.com/sorrycc/roadhog

Last synced: about 1 month ago
JSON representation

🐷 Cli tool for creating react apps, configurable version of create-react-app.

Lists

README 

        
# roadhog



[![NPM version](https://img.shields.io/npm/v/roadhog.svg?style=flat)](https://npmjs.org/package/roadhog)

[![Build Status](https://img.shields.io/travis/sorrycc/roadhog.svg?style=flat)](https://travis-ci.org/sorrycc/roadhog)

[![NPM downloads](http://img.shields.io/npm/dm/roadhog.svg?style=flat)](https://npmjs.org/package/roadhog)

[![Dependencies](https://david-dm.org/sorrycc/roadhog/status.svg)](https://david-dm.org/sorrycc/roadhog)



[查看中文版](./README_zh-cn.md)



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



* [2.0 发布日志](https://github.com/sorrycc/blog/issues/55)

* [Migrate from 1.x](./migrate-from-1.x.md)

* [1.x docs](https://github.com/sorrycc/roadhog/blob/1.x/README_en-us.md)



## 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

```bash

## 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.



```js

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.



```js

{

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



```js

export default {

  externals: { react: 'window.React' },

}

```



Index:



* [entry](#entry)

* [theme](#theme)

* [define](#define)

* [externals](#externals)

* [alias](#alias)

* [extraResolveExtensions](#extraresolveextensions)

* [browserslist](#browserslist)

* [publicPath](#publicpath)

* [outputPath](#outputpath)

* [devtool](#devtool)

* [commons](#commons)

* [hash](#hash)

* [html](#html)

* [disableCSSModules](#disablecssmodules)

* [disableCSSSourceMap](#disablecsssourcemap)

* [extraBabelPresets](#extrababelpresets)

* [extraBabelPlugins](#extrababelplugins)

* [extraBabelIncludes](#extrababelincludes)

* [copy](#copy)

* [proxy](#proxy)

* [sass](#sass)

* [manifest](#manifest)

* [ignoreMomentLocale](#ignoremomentlocale)

* [disableDynamicImport](#disabledynamicimport)

* [env](#env)



### entry



Specify webpack entries, support [glob](https://github.com/isaacs/node-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.



```js

"define": {

  "process.env.TEST": 1,

  "USE_COMMA": 2,

}

```



### externals



Configure webpack's [externals] (https://webpack.js.org/configuration/externals/) property.



e.g.



```js

// Don't pack react and react-dom

"externals": {

  "react": "window.React",

  "react-dom": "window.ReactDOM"

}

```



### alias



Configure webpack's [resolve.alias](https://webpack.js.org/configuration/resolve/#resolve-alias) property.



### extraResolveExtensions



Configure webpack's [resolve.extensions](https://webpack.js.org/configuration/resolve/#resolve-extensions) property.



### browserslist



Configure [browserslist](https://github.com/ai/browserslist), works on both babel-preset-env and autoprefixer.



e.g.



```js

"browserslist": [

  "> 1%",

  "last 2 versions"

]

```



### publicPath



Configure webpack's [output.publicPath](https://webpack.js.org/configuration/output/#output-publicpath) property.



### outputPath



Configure webpack's [output.path](https://webpack.js.org/configuration/output/#output-path) property.



### devtool



Configure webpack's [devtool](https://webpack.js.org/configuration/devtool/) property.



### commons



Configure webpack's [CommonsChunkPlugin](https://webpack.js.org/plugins/commons-chunk-plugin/) plugin, the format is Array.



e.g.



```markup

"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](#manifest).



### html



Configure [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin) plugin.



e.g.



```markup

"html": {

  "template": "./src/index.ejs"

}

```



### disableCSSModules



Disable [CSS Modules](https://github.com/css-modules/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.



```markup

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



```markup

"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](https://www.npmjs.com/package/webpack-manifest-plugin).



e.g.



```markup

"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](https://github.com/seeden/babel-plugin-dynamic-import-node-sync).



### env



Set specific options for certain environment. `development` is for dev, and `production` is for build.



e.g.



```js

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

* `HOST`, default localhost

* `ANALYZE`, whether to analyze the output bundle in `roadhog build`

* `ESLINT`, set `none` disable eslint check

* `TSLINT`, set `none` disable tslint check

* `COMPRESS`, set `none` to disable file compressing in `roadhog build`

* `BROWSER`, set `none` to disable browser open in `roadhog dev`



e.g. start dev server with port 3000,



```bash

# 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](https://github.com/dvajs/dva).






## LICENSE



MIT