zoukankan      html  css  js  c++  java
  • roadhog 介绍

    官方网站: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: [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 里引用的图片等。

  • 相关阅读:
    解决Win10图片打开方式没有“Windows照片查看器”问题
    20199305 2019-2020-2 《网络攻防实践》第四周作业
    20199305 2019-2020-2 《网络攻防实践》第三周作业
    20199305 2019-2020-2 《网络攻防实践》第二周作业
    20199305 2019-2020-2 《网络攻防实践》第一周作业
    20199305 《网络攻防实践》假期作业
    补交作业:第六周 SumN
    外设驱动程序设计-2
    外设驱动程序设计-1
    2019-2020-1 20199305《Linux内核原理与分析》第十二周作业
  • 原文地址:https://www.cnblogs.com/gaoht/p/9400386.html
Copyright © 2011-2022 走看看