介绍 roadhog —— 让 create-react-app 可配的命令行工具

Question

介绍 roadhog —— 让 create-react-app 可配的命令行工具

sorrycc opened this issue 8 years ago · 39 comments

roadhog 是啥?

简单来说，roadhog 是可配置的 react-create-app。

roadhog 是一个 cli 工具，提供 server 和 build 两个命令，分别用于本地调试和构建。命令行体验和 create-react-app 一致，配置略有不同，比如默认开启 css modules，然后还提供了 JSON 格式的配置方式。

命名来源?

http://ow.blizzard.cn/heroes/roadhog

为啥要有 roadhog ?

做 roadhog 有多方原因：

首先，create-react-app 体验实在太好了，细节做地很到位，比如启动成功后会自动打开浏览器窗口这个操作，会检查当前是否已经有打开当前 URL 的 Tab，有的话就刷新那个 Tab 。但可惜他并不支持配置，比如我们要用 less 和 css-modules，就不能使用了。相信会有不少人有同样的想法。

另外，我们目前是基于 atool-build 和 dora 的工具套件。dora 有插件机制，atool-build 的配置和 webpack 一样，基于编程。这两种扩展方式都太灵活，灵活是优点，但导致我们做功能升级时需要考虑太多的事情，并且无法保证兼容。

那么 roadhog 的配置方式和之前的有何不同呢?

配置方式的选择

我们做 cli 工具有一段时间了，从 spm2, spm3, atool-build + dora 到现在的 roadhog。(目前 roadhog 并非 atool 的升级版，两者场景不同, atool 扩展性更好) 配置方式从 JSON 到编程，最终又回归到 JSON 。

roadhog 为啥用 JSON 格式的配置?

做 atool 的时候我们是用编程的配置方式，优点是灵活，可随意改变工具内置的 webpack 配置。

但缺点也很明显：

1. 配置麻烦

比如要删除内置的 CommonChunkPlugin，不加注释基本没人能看懂了。

// Don't extract common.js and common.css
webpackConfig.plugins = webpackConfig.plugins.filter(function(plugin) {
  return !(plugin instanceof webpack.optimize.CommonsChunkPlugin);
});

更多详见：https://github.com/dvajs/dva-cli/blob/1a4cb33/boilerplates/app/webpack.config.js

2. 工具升级困难

举一个实际的例子。

atool-build 内部配置有一段为：

{
  test: /\.css$/,
  loader: 'css!postcss'
}

后面由于一些原因，我们改成了：

{
  test: /\.css$/,
  loader: `${require.resolve('css')}!${require.resolve('postcss')}`
}

但立马导致一些用户出错，原因是他的配置里有判断 loader 内容是否为 css!postcss，这就让工具的升级寸步难行。

roadhog 配置

基于上面的原因，roadhog 的配置以 JSON 格式呈现。

下面是目前支持的全部配置项，他们在 roadhog#配置中有详细解释：

{
  "entry": "src/index.js",
  "disableCSSModules": false,
  "less": false,
  "publicPath": "/",
  "extraBabelPlugins": [],
  "autoprefixer": null,
  "proxy": null,
  "env": null,
}

以及未来可能支持的配置项：https://github.com/sorrycc/roadhog/issues?q=is%3Aissue+is%3Aopen+label%3Aconfig 。

体验 roadhog

安装 roadhog：

$ npm i roadhog -g

新建项目目录：

$ mkdir myapp && cd myapp

创建 package.json，内容为：

{}

创建 src/index.js，内容为：

import './index.html';
document.write('Hello, roadhog!');

创建 src/index.html，内容为：

<script src="index.js"></script>

启动：

$ roadhog server

正常的话，会自动帮你打开浏览器，你会看到 Hello, roadhog!。

(完)

afc163 commented 8 years ago

+1

👍3

henryzp commented 8 years ago

mark

ikobe-zz commented 8 years ago

👍

Answer 1 · 2016-12-15T09:32:20.000Z

👍

我在当前工程安装的roadhog , 每次启动都会新开一个Tab (ubuntu16.04 chrome 55), 并不会直接刷新已有的Tab.

Answer 2 · 2016-12-15T09:34:10.000Z

这个特性只对 mac 有效，基于 applescript 实现的，https://github.com/facebookincubator/create-react-app/blob/master/packages/react-dev-utils/openChrome.applescript 。

Answer 3 · 2016-12-15T09:45:17.000Z

@sorrycc 可以配置不开启吗？非mac用户表示宁愿自己刷新:cry:

Answer 4 · 2016-12-15T09:50:33.000Z

@codering 下个版本加上，sorrycc/roadhog#16

Answer 5 · 2016-12-15T10:02:37.000Z

改变端口，会有如下提示

Something is already running on port 9600.

Would you like to run the app on another port instead? [Y/n]

Answer 6 · 2016-12-15T14:13:20.000Z

这是端口被占用的提示。

Answer 7 · 2016-12-15T14:49:20.000Z

不论换哪个端口都一样

Answer 8 · 2016-12-15T23:42:37.000Z

@codering sorrycc/roadhog@4a619f5

Answer 9 · 2016-12-16T04:04:04.000Z

roadhog@0.2.0, https://github.com/sorrycc/roadhog/releases/tag/0.2.0

Answer 10 · 2016-12-24T15:06:56.000Z

HELLO,
目前在尝试 12 步 30 分钟，完成用户管理的 CURD 应用 (react+dva+antd)
在 window10 x64 无法正常运行 dva-example-user-dashboard 问题如下

Answer 11 · 2016-12-24T22:24:09.000Z

@pillar258 node 版本需要 6.5 或以上。

Answer 12 · 2016-12-26T03:22:18.000Z

@sorrycc 目前我们很多人在用dva windows环境更新到roadhog以后遇到各种问题，截图如下：

Answer 13 · 2016-12-26T07:08:05.000Z

@jayguojianhai node 要 6.5 或以上。

Answer 14 · 2016-12-26T07:09:52.000Z

好的。谢谢，已经解决了。

Answer 15 · 2017-01-11T03:34:18.000Z

您好, 非常感谢您们提供如此优秀和易用的 cli, 使用 dva 和 antd开发体验相当愉快. 这里有一个问题需要请教, 如果我需要在全局引入某个 css 而不是通过 css modules 的方式该怎样引入? 是通过修改.roadhogrc文件进行配置, 还是通过其他方式?

Answer 16 · 2017-01-11T04:28:24.000Z

@mansters 有几种方式：

node_modules 下的 css 不会做 css modules 处理，所以如果是依赖里的 css 可以直接引入
css 文件放 public 目录，然后在 html 里直接引，参考 https://github.com/sorrycc/roadhog#使用-public-目录
改 css 文件，加 :global 前缀

Answer 17 · 2017-01-14T04:49:48.000Z

@sorrycc 好的学习了非常感谢

Answer 18 · 2017-04-05T02:29:16.000Z

@sorrycc 请问roadhog怎样在打包后在文件名中加入随机版本号, 已解决版本更新后的浏览器缓存问题

Answer 19 · 2017-04-07T02:16:46.000Z

@ZiYuEdward 你的这个问题解决了吗？？？

Answer 20 · 2017-04-17T07:23:26.000Z

@sorrycc 请问如果我想配置一些自定义的loader，比如说使用url-loader图片小于10kb采用base64的方式嵌入，roadhog可以实现吗

Answer 21 · 2017-04-27T01:23:59.000Z

dev环境下打包很慢修改一个文件后浏览器卡在那半天才刷新有什么方法可以分析打包过程吗

Answer 22 · 2017-05-04T05:44:36.000Z

hello
我在使用dva-cli创建移动项目有个问题，在roadhogrc.js里面配好icon的设置，但是没办法生效

Answer 23 · 2017-05-15T07:07:54.000Z

@ZiYuEdward 版本号用文件的md5比较好, 不要用随机字符.

Answer 24 · 2017-09-06T06:55:46.000Z

貌似roadhog不能像create-react-app和dva-cli一样使用命令构建初始化项目，请问是没有提供这个功能还是我不会用！

Answer 25 · 2017-09-06T13:52:20.000Z

roadhog 不包含项目初始化功能。

Answer 26 · 2017-09-16T04:18:11.000Z

请问一下我在设置一个环境变量之后，在项目里process.env为何只有development而没有我自己定义的变量？

Answer 27 · 2017-09-16T07:13:57.000Z

@LDmin 需要用 define 配进去才会有，项目里不会自动读全部环境变量的。

Answer 28 · 2017-10-20T08:40:52.000Z

问题1：执行npm run build命令时，会将mock文件夹内的代码打包进入口文件里面吗？
问题2：如果问题1答案为不会，如果我希望打包进入口文件里面，从哪里能配置吗？
以上，谢谢！

Answer 29 · 2017-10-28T03:56:12.000Z

没有配置node-sass，sass-loader的例子吗，很难受

Answer 30 · 2017-11-17T01:32:00.000Z

roadhog 默认将js自动注入html页面的路径和名称是什么（<script src="index-hash.js"></script>）？

Answer 31 · 2017-12-31T08:17:59.000Z

postcss加入后,怎么排除node_modules下的不编译成rem ?

Answer 32 · 2018-05-11T03:08:46.000Z

解决了我在js中引入css文件中变量无效的问题，很好

Answer 33 · 2019-03-06T09:18:39.000Z

你好大神我在umi2.x dva ant-design-pro 中使用了single-spa-react 微前端，你们有类似的案例吗

Answer 34 · 2019-12-19T06:15:13.000Z

dva 项目打包需要20分钟，roadhog有什么优化的地方吗？？

Answer 35 · 2020-04-23T10:46:44.000Z

这个特性只对 mac 有效，基于 applescript 实现的，https://github.com/facebookincubator/create-react-app/blob/master/packages/react-dev-utils/openChrome.applescript 。

mark

Answer 36 · 2020-05-30T06:40:29.000Z

dva 项目打包需要20分钟，roadhog有什么优化的地方吗？？

遇到了同样的问题，我这边打包要半小时，编译一次要3分钟。想知道怎么才能优化呢？