从 atool-build + dora 到 roadhog

[sorrycc]

这几天收到比较多关于 roadhog 的疑问，为啥用 roadhog，啥时不用 roadhog，怎么从 atool-build + dora 切换到 roadhog 等等。解释如下：

roadhog 和 atool-build + dora 有啥区别?

配置

roadhog 是约束型配置，基于 JSON 格式，给出有限的配置方式；atool-build + dora 是扩展型，表现为插件和编程 webpack.config.js 的方式。

功能

标了 暂 的后续可能会支持，看需求吧。

roadhog 的劣势：

• 暂不内置 mock 方案，通过 proxy 和其他服务(比如 json-server )配合使用，已内置更好用的 mock 方案，sorrycc/roadhog#59
• 暂不能扩展没有内置的 webpack 配置，比如要用 sass 现在是不行的，已支持 sorrycc/roadhog#36
• server 无插件机制，不能扩展

roadhog 的优势：

• 内置 HMR
• 内置支持 browser history，基于 webpack-dev-server

为啥用 roadhog?

既然 roadhog 功能没 atool-build + dora 强大，那为啥要切换呢?

• 体验好，基于 create-react-app，比如有非常友好的 错误处理
• 配置简单，基于 JSON，比如禁用 CSS Modules 只要配"disableCSSModules": true
• 黑盒升级，就算之后 roadhog 换成 rollup 或其他的，用户也不需要更改配置

啥情况下不换 roadhog?

以下情况不推荐换 roadhog 。

• 有强定制需求，比如用 sass 等
• 有强 mock 数据需求，并且之前通过 dora-plugin-proxy 写了很多 mock 的
• 无线，并且有强定制需求的， 待调研

修改步骤

修改 package.json

删除 atool-build 和 dora 相关依赖，加上 roadhog 依赖。

$ npm install roadhog --save-dev

修改 scripts 部分，让 start 和 build 走 roadhog：

"start": "roadhog server"
"build": "roadhog build"

可参看这个 Commit 或 dva-example-user-dashboard 。

新增 .roadhogrc

如果是用 dva + antd 的组合，babel 插件部分通常这么配：

"extraBabelPlugins": [
  "transform-runtime",
  ["import", { "libraryName": "antd", "style": "css" }]
],
"env": {
  "development": {
    "extraBabelPlugins": [
      "dva-hmr"
    ]
  }
}

然后把 webpack.config.js 中的配置参考 roadhog#配置 迁移到 .roadhogrc 中。

删除 webpack.config.js

(完)

[nickzheng]

roadhog 什么时候可以加上mock方案

[sorrycc]

@nickzheng sorrycc/roadhog#22，预计 0.5 里加，下下周，当然有 PR 的话会更快点。

[FanXiang]

期待mock方案 👍

[tungh]

能不能加上编译的时候按需打包？
举例：编译的时候根据不同的模块业务逻辑编译出 A、B、C、D、E
然后方便做按需加载？

[sorrycc]

能不能加上编译的时候按需打包？

按需加载需要框架的支持，webpack 默认就是支持按需打包的，可以查下 webpack 的文档。

[tungh]

不好意思，我是看了哪篇文章忘记了，说不推荐在roadhog配置webpack，会影响什么的。在webpack里直接配置那是没问题的。

[sorrycc]

@tungh https://github.com/sorrycc/roadhog/releases/tag/0.4.0 这个? 动态加载不需要做额外配置就支持的。

[geograous]

CaseSensitivePathsPlugin误报，删除model和app.use(model)后，还是报module not found。

[enpenguc]

roadhog如何配置支持 devToolsExtension开发，方便redux调试，查看state数据

[enpenguc]

找到了，看了dva的源代码。配置__REDUX_DEVTOOLS_EXTENSION__ 即可，如

if (window.devToolsExtension) {
  window.__REDUX_DEVTOOLS_EXTENSION__ = window.devToolsExtension; // eslint-disable-line
}

希望楼主将这个给加到dva的介绍里面。

[chenjinhao]

那默认dva是推荐使用 roadhog 和 atool-build + dora？我见antd的官网例子使用的是roadhog，但实际dva-cli生成的是atool-build+dora

[zfhslfgit]

怎么加sass配置？

[henryzp]

mark

[miaozilong]

这玩意能用于正式生产环境么?

[zchuhui]

roadhog 不能配置sass，这点很头大。

[shellteo]

roadhog生成的index.js文件过大，导致页面加载过慢，如何将index.js文件减小？

[330551887]

请问楼上的问题解决了吗? 我也出现了

[jinlong]

./src/index.js
Module build failed: Error: /Users/xxx/Documents/work/project/react-dva/src/index.js: [babel-plugin-dva-hmr error] You must set the `entries` option.

这个怎么解决呢？求教

[fred1218]

@shellteo 所以这时候自己写配置更方便，code spliting，将vender提出去