Laqudee.Z - F2E

npm仓库中的roadhog,本文参考文档open in new window

roadhog简介

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

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

roadhog--让create-react-app可配的命令行工具open in new window
npm官网中的roadhogopen in new window

为什么使用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 里引用的图片等。