roadhog简单解析

npm仓库中的roadhog | 本文参考文档

roadhog简介

roadhog是一个cli工具，提供三个命令：

• server
• build
• test
  分别用于本地调试和构建，并且好用的mock功能。命令行体验和create-react-app一致，配置略有不同，比如默认开启css modules，还提供JSON格式的配置方式。

roadhog–让create-react-app可配的命令行工具
npm官网中的roadhog

为什么使用roadhog

由于create-reate-app的默认配置不能满足需求，且不能提供定制的功能，roadhog的作用就在于保持create-react-app的优雅且可以定制配置。

• 安装
  $ npm i roadhog -g

• 使用

  • 本地开发
    $ roadhog server
  • 打包发布
    $ roadhog build
  • 测试
    $ roadhog test

roadhog特性

• 错误处理
  由于create-react-app在错误处理上的优异变现，所以roadhog也有着不错的体验。roadhog针对.roadhogrc的错误也做了优化。
• 语法错误
• 浏览器
• 运行时错误
  • 没有捕获，在浏览器的控制台查看
• .roadhogrc.mock.js解析错误
• HMR（热替换）
  使用dva，配上babel-plugin-dva-hmr即可实现routes和components以及相关CSS修改的热更新，其他修改会自动刷新页面。

"env" : {
    "development":{
        "extraBabelPlugins":["dva-hmr"]
    }
}

• Mock
  roadhog server 支持 mock 功能，类似 dora-plugin-proxy，在 .roadhogrc.mock.js中进行配置，支持基于 require 动态分析的实时刷新，支持 ES6 语法，以及友好的出错提示。
• 智能重启
  • 配置文件的修改会触发roadhog的自动重启，会触发重启的文件有：
  • .roadhogrc
  • .roadhogrc.js
  • .roadhogrc.mock.js
  • theme配置指定的文件

roadhog配置

• 基本概念：
  • 配置存于 .roadhogrc文件中（如果你不喜欢 JSON 配置，可以用 .roadhogrc.js以 JS 的方式编写，支持 ES6）
  • 格式为JSON，允许注释
  • 布尔型的配置默认值均为 false
  • 官网展示默认配置：

{
  "entry": "src/index.js",
  "disableCSSModules": false, //禁用CSS Module
  "publicPath": "/", //配置生产环境的publicPath，开发环境下永远为 /
  "outputPath": "./dist", //配置输出路径，默认是 ./dist
  "extraBabelPlugins": [], //配置额外的 babel plugin。babel plugin 只能添加，不允许覆盖和删除。
  "extraPostCSSPlugins": [], //配置额外的postcss插件这个配置只能在 .roadhogrc.js 里使用
  "autoprefixer": null, //配置autoprefixer参数，详见官网
  "proxy": null, //代理
  "externals": null, //配置webpack的externals属性
  "library": null, //配置webpack的library属性
  "libraryTarget": "var", //配置webpack的libraryTarget属性
  "multipage": false,//配置是否多页应用，多页应用自动提取公共部分为common.js和common.css
  "define": null,//配置 webpack 的 DefinePlugin 插件，define 的值会自动做 JSON.stringify 处理。
  "env": null, //针对特定的环境进行配置，server的环境变量是development，build的环境变量是production。
  "theme": null,//配置主题，实际上是配less的modifyVars。支持Object和文件路径两种方式的配置。
}

entry

指定webpack入口，支持glob格式，若你的项目是多页类型，会希望把src/pages文件作为入口。如下配置：

"entry" : "src/pages/*.js"

环境变量

可环境变量临时配置一些参数，包括：

• PORT，端口号，默认8000
• HOST，默认localhost
• HTTPS，是否开启https，默认关闭
• BROWSER，设为none 时，不自动打开浏览器
• CLEAR_CONSOLE，设为none时清屏

//OS X, Linux
$ PORT=3000 roadhog server

//Windows
$ set PORT=3000&&roadhog server

命令行工具

• 详见官网

public目录

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