从 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-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
(完)
正文到此结束
热门推荐
相关文章
近期评论
-
666
-
文章和留言都翻到11页了 没有OOM
-
-
朋友，翻页到11页，及以后，会出现OOM，无法访问
-
-
-
-
版本号是多少，你可以下载哪个代码仓库，jdk选1.8 直接跑就行
-
-
Loading...
![[HBLOG]公众号](https://www.liuhaihua.cn/img/qrcode_gzh.jpg)
