![](\"https://zos.alipayobjects.com/rmsportal/vpkwOtXNukXpeQBNToEb.gif\")
\n\n \n
![](\"https://zos.alipayobjects.com/rmsportal/wPGMQwhZmFhGddMZKFci.png\")
\n\n#### 语法错误\n\n控制台\n\n![](\"https://zos.alipayobjects.com/rmsportal/BWnfDJQqlnGvHSZxOVuY.png\")
\n\n浏览器\n\n![](\"https://zos.alipayobjects.com/rmsportal/onzXGetQRKGmWQXmICDC.png\")
\n\n#### 运行时错误\n\n没有捕获，在浏览器的控制台查看。\n\n#### .roadhogrc.mock.js 解析错误\n\n![](\"https://zos.alipayobjects.com/rmsportal/awkFmHoxLWdRgbTlCzDF.png\")
\n\n### HMR (热替换)\n\nCSS 在开发模式下会走 style-loader (被内嵌在 JavaScript 文件中)，所以只要保证 JavaScript 的热更新，即可实现 CSS 的热更新。\n\n如果大家使用 [dva](https://github.com/dvajs/dva) ，配上 [babel-plugin-dva-hmr](https://github.com/dvajs/babel-plugin-dva-hmr) 即可实现 routes 和 components 以及相关 CSS 修改的热更新，其他修改会自动刷新页面。\n\n```json\n\"env\": {\n \"development\": {\n \"extraBabelPlugins\": [\"dva-hmr\"]\n }\n}\n```\n\n### Mock\n\nroadhog server 支持 mock 功能，类似 [dora-plugin-proxy](https://github.com/dora-js/dora-plugin-proxy)，在 `.roadhogrc.mock.js` 中进行配置，支持基于 require 动态分析的实时刷新，支持 ES6 语法，以及友好的出错提示。\n\n比如：\n\n```js\nexport default {\n // 支持值为 Object 和 Array\n 'GET /api/users': { users: [1,2] },\n\n // GET POST 可省略\n '/api/users/1': { id: 1 },\n\n // 支持自定义函数，API 参考 express@4\n 'POST /api/users/create': (req, res) => { res.end('OK'); },\n\n // Forward 到另一个服务器\n 'GET /assets/*': 'https://assets.online/',\n\n // Forward 到另一个服务器，并指定子路径\n // 请求 /someDir/0.0.50/index.css 会被代理到 https://g.alicdn.com/tb-page/taobao-home, 实际返回 https://g.alicdn.com/tb-page/taobao-home/0.0.50/index.css\n 'GET /someDir/(.*)': 'https://g.alicdn.com/tb-page/taobao-home',\n};\n```\n\n### 智能重启\n\n配置文件修改的修改会触发 roadhog server 的自动重启，会触发重启的文件有：\n\n* `.roadhogrc`\n* `.roadhogrc.js`\n* `.roadhogrc.mock.js`\n* theme 配置指定的文件\n\n## 配置\n\n关于配置的一些基本概念：\n\n* 配置存于 `.roadhogrc` 文件中（如果你不喜欢 JSON 配置，可以用 `.roadhogrc.js` 以 JS 的方式编写，支持 ES6）\n* 格式为 `JSON`，允许注释\n* 布尔类型的配置项默认值均为 `false`\n* 支持通过 `webpack.config.js` 以编码的方式进行配置，但不推荐，因为 roadhog 本身的 major 或 minor 升级可能会引起兼容问题。使用时会给予警告⚠️⚠️⚠️，详见 [#36](https://github.com/sorrycc/roadhog/issues/36) 。（`webpack.config.js` 本身的编写支持 ES6，会通过 babal-register 做一层转换。）\n\n默认配置：\n\n```json\n{\n \"entry\": \"src/index.js\",\n \"disableCSSModules\": false,\n \"publicPath\": \"/\",\n \"outputPath\": \"./dist\",\n \"extraBabelPlugins\": [],\n \"extraPostCSSPlugins\": [],\n \"autoprefixer\": null,\n \"proxy\": null,\n \"externals\": null,\n \"multipage\": false,\n \"define\": null,\n \"env\": null,\n \"theme\": null,\n}\n```\n\n查看更多[配置相关问题和改进](https://github.com/sorrycc/roadhog/issues?q=is%3Aissue+is%3Aopen+label%3Aconfig)。\n\n### entry\n\n指定 webpack 入口文件，支持 [glob](https://github.com/isaacs/node-glob) 格式。\n\n如果你的项目是多页类型，会希望把 `src/pages` 的文件作为入口。可以这样配：\n\n```\n\"entry\": \"src/pages/*.js\"\n```\n\n### disableCSSModules\n\n禁用 [CSS Modules](https://github.com/css-modules/css-modules)。最好别关，熟悉并使用他后，你会发现写样式简单了很多。\n\n### publicPath\n\n配置生产环境的 [publicPath](http://webpack.github.io/docs/configuration.html#output-publicpath)，开发环境下永远为 `/`。\n\n### outputPath\n\n配置[输出路径](http://webpack.github.io/docs/configuration.html#output-path)，默认是 `./dist`。\n\n### extraBabelPlugins\n\n配置额外的 babel plugin。babel plugin 只能添加，不允许覆盖和删除。\n\n比如，同时使用 antd, dva 时，通常需要这么配：\n\n```\n\"extraBabelPlugins\": [\n \"transform-runtime\",\n \"dva-hmr\",\n [\"import\", { \"libraryName\": \"antd\", \"libraryDirectory\": \"lib\", \"style\": \"css\" }]\n]\n```\n\n同时安装相关依赖：\n\n```bash\n$ npm i babel-plugin-transform-runtime babel-plugin-import babel-plugin-dva-hmr --save-dev\n$ npm i babel-runtime --save\n```\n\n注意：这么配还有个问题，`dva-hmr` 是开发环境的插件，如果 build 时也用上就会打出冗余代码。解决方案详见 [#env](#env)。\n\n### extraPostCSSPlugins\n\n配置额外的 postcss 插件。\n\n注意：由于 postcss 的插件是以函数的方式进行配置的，所以这个配置只能在 `.roadhogrc.js` 里使用。\n\n比如：\n\n```\nextraPostCSSPlugins: [\n pxtorem({\n rootValue: 100,\n propWhiteList: [],\n }),\n],\n```\n\n### autoprefixer\n\n配置 autoprefixer 参数，详见 [autoprefixer](https://github.com/postcss/autoprefixer) 和 [browserslist](https://github.com/ai/browserslist#queries)。\n\n比如，如果是做移动端的开发，可以配成：\n\n```\n\"autoprefixer\": {\n \"browsers\": [\n \"iOS >= 8\", \"Android >= 4\"\n ]\n}\n```\n\n### proxy\n\n配置代理，详见 [webpack-dev-server#proxy](https://webpack.github.io/docs/webpack-dev-server.html#proxy)。\n\n如果要代理请求到其他服务器，可以这样配：\n\n```\n\"proxy\": {\n \"/api\": {\n \"target\": \"http://jsonplaceholder.typicode.com/\",\n \"changeOrigin\": true,\n \"pathRewrite\": { \"^/api\" : \"\" }\n }\n}\n```\n\n然后访问 `/api/users` 就能访问到 http://jsonplaceholder.typicode.com/users 的数据。\n\n如果要做数据 mock，可以考虑和 [json-server](https://github.com/typicode/json-server) 结合使用，把 `/api` 代理到 json-server 启动的端口。\n\n### externals\n\n配置 webpack 的 [externals](http://webpack.github.io/docs/configuration.html#externals) 属性。\n\n### multipage\n\n配置是否多页应用。多页应用会自动提取公共部分为 common.js 和 common.css 。\n\n### define\n\n配置 webpack 的 [DefinePlugin](http://webpack.github.io/docs/list-of-plugins.html#defineplugin) 插件，define 的值会自动做 `JSON.stringify` 处理。\n\n### env\n\n针对特定的环境进行配置。server 的环境变量是 `development`，build 的环境变量是 `production`。\n\n比如：\n\n```\n\"extraBabelPlugins\": [\"transform-runtime\"],\n\"env\": {\n \"development\": {\n \"extraBabelPlugins\": [\"dva-hmr\"]\n }\n}\n```\n\n这样，开发环境下的 extraBabelPlugins 是 `[\"transform-runtime\", \"dva-hmr\"]`，而生产环境下是 `[\"transform-runtime\"]`。\n\n### theme\n\n配置主题，实际上是配 less 的 `modifyVars`。支持 Object 和文件路径两种方式的配置。\n\n比如：\n\n```\n\"theme\": {\n \"@primary-color\": \"#1DA57A\"\n}\n```\n\n或者，\n\n```\n\"theme\": \"./node_modules/abc/theme-config.js\"\n```\n\n这里有 [如何配置 antd theme 的例子](https://github.com/dvajs/dva-example-user-dashboard/commit/d6da33b3a6e18eb7f003752a4b00b5a660747c31) 。\n\n### svgSpriteLoaderDirs\n\n配置一个路径数组, 该路径下的 svg 文件会全部交给 [svg-sprite-loader](https://github.com/kisenka/svg-sprite-loader) 处理\n\n比如，使用 antd-mobile 的 [自定义 svg icon](https://mobile.ant.design/components/icon) 功能的用户，可以在 `.roadhogrc.js` 文件中做如下配置\n\n```js\n// npm i antd-mobile -S\nconst path = require('path');\nconst svgSpriteDirs = [\n require.resolve('antd-mobile').replace(/warn\\.js$/, ''), // antd-mobile 内置svg\n path.resolve(__dirname, 'src/my-project-svg-foler'), // 业务代码本地私有 svg 存放目录\n];\n\nexport default {\n // ...\n svgSpriteLoaderDirs: svgSpriteDirs,\n //...\n}\n\n```\n\n\n## 环境变量\n\n可环境变量临时配置一些参数，包括：\n\n* `PORT`, 端口号，默认 8000\n* `HOST`, 默认 localhost\n* `HTTPS`，是否开启 https，默认关闭\n* `BROWSER`，设为 none 时不自动打开浏览器\n\n比如，使用 3000 端口开启服务器可以这样：\n\n```bash\n// OS X, Linux\n$ PORT=3000 roadhog server\n\n// Windows (cmd.exe)\n$ set PORT=3000&&roadhog server\n```\n\n## 命令行参数\n\n### roadhog server\n\n```bash\n$ roadhog server -h\nUsage: roadhog server [options]\n\nOptions:\n -h Show help [boolean]\n```\n\n### roadhog build\n\n```bash\n$ roadhog build -h\nUsage: roadhog build [options]\n\nOptions:\n --debug Build without compress [boolean] [default: false]\n --watch, -w Watch file changes and rebuild [boolean] [default: false]\n --output-path, -o Specify output path [string] [default: null]\n --analyze Visualize and analyze your Webpack bundle.\n [boolean] [default: false]\n -h Show help [boolean]\n```\n\n### roadhog test\n\n```bash\n$ roadhog test -h\nUsage: roadhog test [options] [mocha-options]\n\nOptions:\n --coverage Output coverage [boolean] [default: false]\n -h Show help [boolean]\n```\n\n## 使用 `public` 目录\n我们约定 `public` 目录下的文件会在 server 和 build 时被自动 copy 到输出目录（默认是 `./dist`）下。所以可以在这里存放 favicon, iconfont, html, html 里引用的图片等。\n\n## FAQ\n\n### 那么为什么提供 JSON 级别的约定型配置，而非类似 webpack.config.js 的编码型配置?\n\n首先是 JSON 的方式比较简单，`true`/`false` 或是一些简单的字符串就可完成配置；另外，JSON 方式能有效控制使用场景，而编程式的非常不可控，roadhog 的一个简单改动都可能导致之前的配置不可用。\n\n### 为什么叫 roadhog ?\n\nroadhog 即路霸，和 [dva](https://github.com/dvajs/dva) 一样，是守望先锋中的另一名英雄，希望能为 dva 保驾护航。\n\n![](\"https://zos.alipayobjects.com/rmsportal/guCnwwMItoLOTmcdbaEZ.png\")
\n\n### 报 `Unexpected token` 错误，类似下面这样\n\n```\nError in ./index.js\nModule parse failed: /Users/chencheng/Documents/Work/Misc/dva-cli/boilerplates/demo/index.js Unexpected token (15:23)\nYou may need an appropriate loader to handle this file type.\nSyntaxError: Unexpected token (15:23)\n @ multi index\n```\n\n把源码放到 src 目录下，因为非 src 目录下的文件不会走 babel 编译。\n\n### Windows/Ubuntu 下每次启动后打开新 Tab 比较烦\n\n```bash\n# Ubuntu\n$ BROWSER=none roadhog server\n\n# Windows\n$ set BROWSER=none&&roadhog server\n```\n\n## LICENSE\n\nMIT\n","bugs":{"url":"https://github.com/sorrycc/roadhog/issues"},"license":"MIT","versions":{"0.0.1-alpha":{"name":"roadhog","version":"0.0.1-alpha","_id":"roadhog@0.0.1-alpha","scripts":{},"_shasum":"2a235f69fbdbeb286d7e431b87bc7f1a4ff1e986","_from":".","_npmVersion":"3.3.12","_nodeVersion":"5.2.0","_npmUser":{"name":"sorrycc","email":"sorrycc@gmail.com"},"dist":{"shasum":"2a235f69fbdbeb286d7e431b87bc7f1a4ff1e986","tarball":"http://nexus.dui88.com:8081/nexus/content/groups/npm-all/roadhog/-/roadhog-0.0.1-alpha.tgz"},"maintainers":[{"name":"sorrycc","email":"sorrycc@gmail.com"}],"_npmOperationalInternal":{"host":"packages-16-east.internal.npmjs.com","tmp":"tmp/roadhog-0.0.1-alpha.tgz_1466688362179_0.5652146502397954"},"directories":{}},"0.1.0":{"name":"roadhog","version":"0.1.0","description":"Cli tool for serve and build react app, based on create-react-app, support JSON pattern config.","bin":{"roadhog":"./bin/roadhog.js"},"keywords":["cli","react","roadhog","create-react-app"],"authors":["chencheng