roadhog 介紹

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

 

項目搭建demo: https://github.com/ght5935/antd-dva-less-webpackhtml

一:roadhog 

roadhog 是一個 cli 工具,提供 server、 build 和 test 三個命令,分別用於本地調試和構建,而且提供了特別易用的 mock 功能。命令行體驗和 create-react-app 一致,配置略有不一樣,好比默認開啓 css modules,而後還提供了 JSON 格式的配置方式node

二:爲何要用

因爲 create-react-app 的默認配置不能知足需求,而他又不提供定製的功能,因而基於他實現了一個可配置版。因此若是既要 create-react-app 的優雅體驗,又想定製配置,那麼能夠試試 roadhog 。react

三:入門

##全局或本地安裝 
$ npm i roadhog -g
 
##檢查版本 
$ roadhog -v
 
##本地發展 
$ roadhog dev
 
##編譯 
$ roadhog build
$ NO_COMPRESS = 1個roadhog build
 
##測試 
$ roadhog  測試

配置

關於配置的一些基本概念:webpack

    • 配置存於 .roadhogrc 文件中(若是你不喜歡 JSON 配置,能夠用 .roadhogrc.js 以 JS 的方式編寫,支持 ES6)
    • 格式爲 JSON,容許註釋
    • 布爾類型的配置項默認值均爲 false
    • 支持經過 webpack.config.js 以編碼的方式進行配置,但不推薦,由於 roadhog 自己的 major 或 minor 升級可能會引發兼容問題。使用時會給予警告⚠️⚠️⚠️,詳見 #36 。(webpack.config.js 自己的編寫支持 ES6,會經過 babal-register 作一層轉換。)

默認配置git

{
  "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,
}

查看更多配置相關問題和改進github

entry

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

若是你的項目是多頁類型,會但願把 src/entry的文件做爲入口。能夠這樣配:express

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

disableCSSModules

禁用 CSS Modules。最好別關,熟悉並使用他後,你會發現寫樣式簡單了不少。npm

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: [1,2] },
 
  // GET POST 可省略
  '/api/users/1': { id: 1 },
 
  // 支持自定義函數,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=3000 roadhog server
 
# Windows (cmd.exe) 
$ set PORT=3000&&roadhog server
 
# Or use cross-env for all platforms 
$ cross-env PORT=3000 roadhog server

使用 public 目錄

咱們約定 public 目錄下的文件會在 server 和 build 時被自動 copy 到輸出目錄(默認是 ./dist)下。因此能夠在這裏存放 favicon, iconfont, html, html 裏引用的圖片等。

相關文章
相關標籤/搜索