官方网站:https://www.npmjs.com/package/roadhog;

项目搭建demo: https://github.com/ght5935/antd-dva-less-webpack

一:roadhog

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

二:为什么要用

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

三:入门

##全局或本地安装
$ npm i roadhog -g ##检查版本
$ roadhog -v ##本地发展
$ roadhog dev ##编译
$ roadhog build
$ NO_COMPRESS = 1个roadhog build ##测试
$ roadhog 测试

配置

关于配置的一些基本概念:

    • 配置存于 .roadhogrc 文件中(如果你不喜欢 JSON 配置,可以用 .roadhogrc.js 以 JS 的方式编写,支持 ES6)
    • 格式为 JSON,允许注释
    • 布尔类型的配置项默认值均为 false
    • 支持通过 webpack.config.js 以编码的方式进行配置,但不推荐,因为 roadhog 本身的 major 或 minor 升级可能会引起兼容问题。使用时会给予警告⚠️⚠️⚠️,详见 #36 。(webpack.config.js 本身的编写支持 ES6,会通过 babal-register 做一层转换。)

默认配置

{
"entry": "src/index.js",
"disableCSSModules": false,
"cssModulesExclude": [],
"publicPath": "/",
"outputPath": "./dist",
"extraBabelPlugins": [],
"extraPostCSSPlugins": [],
"sass": false,
"hash": false,
"autoprefixer": null,
"proxy": null,
"externals": null,
"library": null,
"libraryTarget": "var",
"multipage": false,
"define": null,
"env": null,
"theme": null,
}

查看更多配置相关问题和改进

entry

指定 webpack 入口文件,支持 glob 格式。

如果你的项目是多页类型,会希望把 src/entry的文件作为入口。可以这样配:

  'entry': 'src/entry/*.js',

disableCSSModules

禁用 CSS Modules。最好别关,熟悉并使用他后,你会发现写样式简单了很多。

cssModulesExclude

支持 CSSModules 混用,通过 cssModulesExclude 可指定不需要走 CSSModules 的文件列表。

"cssModulesExclude": [
'./src/a.css',
'./src/b.less',
]

hash

使用 hash 文件名。

"hash": true

publicPath

配置生产环境的 publicPath,开发环境下永远为 /

outputPath

配置输出路径,默认是 ./dist

extraBabelPlugins

配置额外的 babel plugin。babel plugin 只能添加,不允许覆盖和删除。

比如,同时使用 antd, dva 时,通常需要这么配:

"extraBabelPlugins": [
"transform-runtime",
"dva-hmr",
["import", { "libraryName": "antd", "libraryDirectory": "lib", "style": "css" }]
] 或 "extraBabelPlugins": [
"transform-runtime",
["import", { "libraryName": "antd", "style": true }]
]

同时安装相关依赖:

$ npm i babel-plugin-transform-runtime babel-plugin-import babel-plugin-dva-hmr --save-dev
$ npm i babel-runtime --save

注意:这么配还有个问题,dva-hmr 是开发环境的插件,如果 build 时也用上就会打出冗余代码。解决方案详见 #env

proxy

配置代理,详见 webpack-dev-server#proxy

如果要代理请求到其他服务器,可以这样配:

"proxy": {
"/api": {
"target": "http://jsonplaceholder.typicode.com/",
"changeOrigin": true,
"pathRewrite": { "^/api" : "" }
}
}

然后访问 /api/users 就能访问到 http://jsonplaceholder.typicode.com/users 的数据。

如果要做数据 mock,可以考虑和 json-server 结合使用,把 /api 代理到 json-server 启动的端口。

env

针对特定的环境进行配置。server 的环境变量是 development,build 的环境变量是 production

比如:

"extraBabelPlugins": ["transform-runtime"],
"env": {
"development": {
"extraBabelPlugins": ["dva-hmr"]
}
} 或 "env": {
"development": {
"extraBabelPlugins": [
"dva-hmr",
"transform-runtime",
["import", { "libraryName": "antd", "style": true }]
]
},
"production": {
'extraBabelIncludes': [
'node_modules/swiper/',
'node_modules/dom7/'
],
"extraBabelPlugins": [
"transform-runtime",
["import", { "libraryName": "antd", "style": true }]
]
}
}

这样,开发环境下的 extraBabelPlugins 是 ["transform-runtime", "dva-hmr"],而生产环境下是 ["transform-runtime"]

theme

配置主题,实际上是配 less 的 modifyVars。支持 Object 和文件路径两种方式的配置。

比如:

"theme": {
"@primary-color": "#1DA57A"
} 或 "theme": "./node_modules/abc/theme-config.js"

这里有 如何配置 antd theme 的例子 。

externals

配置 webpack 的 externals 属性。

library

配置 webpack 的 library 属性。

libraryTarget

配置 webpack 的 libraryTarget 属性。

multipage

配置是否多页应用。多页应用会自动提取公共部分为 common.js 和 common.css 。

define

配置 webpack 的 DefinePlugin 插件,define 的值会自动做 JSON.stringify 处理。

HMR (热替换)

CSS 在开发模式下会走 style-loader (被内嵌在 JavaScript 文件中),所以只要保证 JavaScript 的热更新,即可实现 CSS 的热更新。

如果大家使用 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 语法,以及友好的出错提示。

eg:

export default {
// 支持值为 Object 和 Array
'GET /api/users': { users: [,] }, // GET POST 可省略
'/api/users/1': { id: }, // 支持自定义函数,API 参考 express@4
'POST /api/users/create': (req, res) => { res.end('OK'); }, // Forward 到另一个服务器
'GET /assets/*': 'https://assets.online/', // Forward 到另一个服务器,并指定子路径
// 请求 /someDir/0.0.50/index.css 会被代理到 https://g.alicdn.com/tb-page/taobao-home, 实际返回 https://g.alicdn.com/tb-page/taobao-home/0.0.50/index.css
'GET /someDir/(.*)': 'https://g.alicdn.com/tb-page/taobao-home',
};

环境变量

可环境变量临时配置一些参数,包括:

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

比如,使用 3000 端口开启服务器可以这样:

# OS X, Linux
$ PORT= roadhog server # Windows (cmd.exe)
$ set PORT=&&roadhog server # Or use cross-env for all platforms
$ cross-env PORT= roadhog server

使用 public 目录

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

roadhog 介绍的更多相关文章

  1. roadhog 构建优化

    背景 一个 antd 项目打包时间太长,竟然快二十分钟了,有时还会导致内存溢出,查了一些资料(thanks funfish),解决方法如下 roadhog.js问题 roadhog.js 是类似可配置 ...

  2. CSS3 background-image背景图片相关介绍

    这里将会介绍如何通过background-image设置背景图片,以及背景图片的平铺.拉伸.偏移.设置大小等操作. 1. 背景图片样式分类 CSS中设置元素背景图片及其背景图片样式的属性主要以下几个: ...

  3. MySQL高级知识- MySQL的架构介绍

    [TOC] 1.MySQL 简介 概述 MySQL是一个关系型数据库管理系统,由瑞典MySQL AB公司开发,目前属于Oracle公司. MySQL是一种关联数据库管理系统,将数据保存在不同的表中,而 ...

  4. Windows Server 2012 NIC Teaming介绍及注意事项

    Windows Server 2012 NIC Teaming介绍及注意事项 转载自:http://www.it165.net/os/html/201303/4799.html Windows Ser ...

  5. Linux下服务器端开发流程及相关工具介绍(C++)

    去年刚毕业来公司后,做为新人,发现很多东西都没有文档,各种工具和地址都是口口相传的,而且很多时候都是不知道有哪些工具可以使用,所以当时就想把自己接触到的这些东西记录下来,为后来者提供参考,相当于一个路 ...

  6. JavaScript var关键字、变量的状态、异常处理、命名规范等介绍

    本篇主要介绍var关键字.变量的undefined和null状态.异常处理.命名规范. 目录 1. var 关键字:介绍var关键字的使用. 2. 变量的状态:介绍变量的未定义.已定义未赋值.已定义已 ...

  7. HTML DOM 介绍

    本篇主要介绍DOM内容.DOM 节点.节点属性以及获取HTML元素的方法. 目录 1. 介绍 DOM:介绍DOM,以及对DOM分类和功能的说明. 2. DOM 节点:介绍DOM节点分类和节点层次. 3 ...

  8. HTML 事件(一) 事件的介绍

    本篇主要介绍HTML中的事件知识:事件相关术语.DOM事件规范.事件对象. 其他事件文章 1. HTML 事件(一) 事件的介绍 2. HTML 事件(二) 事件的注册与注销 3. HTML 事件(三 ...

  9. HTML5 介绍

    本篇主要介绍HTML5规范的内容和页面上的架构变动. 目录 1. HTML5介绍 1.1 介绍 1.2 内容 1.3 浏览器支持情况 2. 创建HTML5页面 2.1 <!DOCTYPE> ...

随机推荐

  1. Spring @Configuration 和 @Component 区别

    Spring @Configuration 和 @Component 区别 一句话概括就是 @Configuration 中所有带 @Bean 注解的方法都会被动态代理,因此调用该方法返回的都是同一个 ...

  2. 【Jenkins】新版本的特性:自定义流水线

    #!/usr/bin/env groovy pipeline { agent none stages { stage('stage-01') { agent { label 'master' } st ...

  3. Android TextView中链接(link)点击事件的截取

    布局文件xml <TextView package com.jayce.testlink; import android.net.Uri; import android.os.Bundle; i ...

  4. 在Centos7下安装nghttp2

    如果是Ubuntu18.04, 系统本身已经带了nghttp2了, 直接apt安装就可以. 下载源代码 https://github.com/nghttp2/nghttp2 如果是在Ubuntu下编译 ...

  5. CAP二十年:“规则”变了

    本文是原文https://www.cnblogs.com/cobbliu/p/7494961.html的译文,原链接:http://www.infoq.com/cn/articles/cap-twel ...

  6. 生成命令行接口--google开源的fire使用体验【python-fire】

    在python中,命令行接口常用的argparse 和click,但是相对于python-fire 来说灵活度太缺了,fire可以直接将python中的函数,以命令行显示. 简单的介绍几个例子: #! ...

  7. 使用h2数据库

    h2数据库提供了一个简单的web管理界面 import org.h2.tools.Server; import org.slf4j.Logger; import org.slf4j.LoggerFac ...

  8. 基础008_定浮点转化[floating point IP]

    作者:桂. 时间:2018-05-15  21:55:50 链接:http://www.cnblogs.com/xingshansi/p/9042564.html 前言 本文为Xilinx float ...

  9. Shell脚本编程(三):shell参数传递

    我们可以在执行 Shell 脚本时,向脚本传递参数,脚本内获取参数的格式为:$n.n 代表一个数字,1 为执行脚本的第一个参数,2 为执行脚本的第二个参数,以此类推…… 实例 以下实例我们向脚本传递三 ...

  10. linux下以‘-’开头的文件名

    linux下以‘-’开头的文件名,cp.mv.rm.ls等对他都是无效的: [root@ha131 ~]# ll -plat.py ls:无效选项 -- . 请尝试执行"ls --help& ...