为了紧跟 ant design 的步伐,前不久将项目从 dora 切换到了 roadhog。当然,问题也如雨后春笋一般,陆续冒出来,总结一下,也不负折腾。

一、Roadhog 是什么?

dva 是基于 reduxredux-sagareact-route 的框架,roadhog 是基于 create-react-app 脚手架优化简便的脚手架。

我们可以这样理解:dva 相当于 react + redux,而 roadhog 则是 webpack

官网是这么描述的:由于 create-react-app 的默认配置不能满足需求,而他又不提供定制的功能,于是基于他实现了一个可配置版。所以如果既要 create-react-app 的优雅体验,又想定制配置,那么可以试试 roadhog 。

二、如何使用?

首先,全局安装 roadhog

1
npm i roadhog -g

其次,在项目根目录下创建 .roadhogrc 文件,并添加如下代码(配置项请参看官网文档):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
{
"entry": "src/index.js",
"disableCSSModules": false,
"publicPath": "/",
"theme": {
"@primary-color": "#108ee9",
"@link-color": "#1DA57A",
"@border-radius-base": "2px",
"@font-size-base": "16px",
"@line-height-base": "1.2"
},
"externals": {
"XLSX": "window.XLSX",
"jquery": "jQuery"
},
"autoprefixer": null,
"extraBabelPlugins": [
"transform-runtime",
["import", { "libraryName": "antd", "style": "css" }]
],
"env": {
"development": {
"extraBabelPlugins": [
"dva-hmr"
]
}
}
}

然后,我们就可以通过启动项目了:

1
roadhog server

最后,在需要构建发布的时候,执行:

1
roadhog build

此外,启动测试,默认会跑 ./test 目录下的所有文件

1
roadhog test

三、从 atool-build + dora 转换到 roadhog

此处参考了作者的说明文档,大致过程如下:

1.修改 package.json,删除 atool-builddora 相关依赖,加上 roadhog 依赖。

1
npm install roadhog --save-dev

2.修改 scripts 部分,让 startbuildroadhog

1
2
"start": "roadhog server"
"build": "roadhog build"

3.新增 .roadhogrc
如果是用 dva + antd 的组合,babel 插件部分通常这么配:

1
2
3
4
5
6
7
8
9
10
11
"extraBabelPlugins": [
"transform-runtime",
["import", { "libraryName": "antd", "style": "css" }]
],
"env": {
"development": {
"extraBabelPlugins": [
"dva-hmr"
]
}
}

4.把 webpack.config.js 中的配置迁移到 .roadhogrc 中。
5.删除 webpack.config.js

最后一定要删除 webpack.config.js,否则可能会出现异常。

四、全局安装 rodehog,启动 roadhog server 异常处理

按照步骤当运行 roadhog server 的时候,报出了如下的错误:

1
2
3
4
Failed to compile.
Error in ./src/index.js
Module build failed: Error: /Users/fox/Documents/ceb-admin/src/index.js: [babel-plugin-dva-hmr error] You must set the `entries` option.
@ multi index

这时候,需要看一下 babel-plugin-dva-hmr 升级到最新的版本 0.3.2,再次运行 roadhog server
系统默认打开 http://localhost:8000/

不错,项目启动起来了。

五、接着,我们需要打包发布:

执行

1
roadhog build

可以看到生成了。

六、打包完,启动服务器模拟一下部署环境

你可以使用 ngnix,或者 http-server 启动:

ok,访问链接,页面正常打开,没有问题。

七、其他异常:

1.Error in Cannot find module ‘less’
初步怀疑并没有添加 less loader,执行

1
npm install less —save

2.使用 public 目录
我们约定 public 目录下的文件会在 serverbuild 时被自动 copy 到输出目录(默认是 ./dist)下。所以可以在这里存放 favicon, iconfont, html, html 里引用的图片等。

3.图片路径访问不到,奇怪
需要放到 public 目录下,且访问不需要带 public 目录

4.Cannot find module ‘webpack/lib/removeAndDo’
出现如上提示,需要局部安装 webpack,执行

1
npm i webpack --save-dev

详情

5.Chunk.entry was removed. Use hasRuntime()
执行:

1
npm install webpack-extract-text-plugin —save

还有:

1
npm install extract-text-webpack-plugin@^2.0.0-beta --save-dev

详情

八、打包慢怎么办

1
2
3
roadhog build --debug
roadhog build --watch
roadhog build -h

此外,我们可以分析一下构建后文件大小:

1
roadhog build --analyze

当出现如下提示,说明已经成功生成了分析文件:

1
Analyze result is generated at dist/stats.html.

让然,我们还可以查看 build 时的编译时间:

1
time roadhog build

结果可能如下:

1
roadhog build 79.98s user 3.38s system 99% cpu 1:23.95 total

这里指包括开发时的编译时间,修改代码重编译时间。

九、参考:

  1. roadhog
  2. 从 dora 转到 roadhog
  3. webpack