从 atool-build + dora 到 roadhog

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

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

配置

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

功能

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

roadhog 的劣势:

  • 暂不内置 mock 方案,通过 proxy 和其他服务(比如json-server )配合使用
  • 暂不能扩展没有内置的 webpack 配置,比如要用 sass 现在是不行的
  • 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-builddora 相关依赖,加上 roadhog 依赖。

$ npm install roadhog --save-dev

修改 scripts 部分,让 startbuild 走 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

(完)

我来评几句
登录后评论

已发表评论数()

相关站点

热门文章