使用 Schema-Utils 对 Webpack Plugin 进行配置项校验的简单用例

目录
  • schema.json
  • 插件中的写法
  • 修改报错时输出的信息
  • 结尾

今天来学习如何使用 webpack 官方提供的 schema-utils 库。

schema-utils 库用于在 loader 和 plugin 实例化时,对传入的参数进行校验。

如果格式正确,无事发生;如果错误,控制台会显示出比较详细的报错信息,并中断脚本的执行。

我们看个简单的用例:

const { validate } = require("schema-utils");
const schema = {
  "type": "object",
  "properties": {
    "filename": {
      "type": "string",
    }
  },
  "additionalProperties": false
}
const options = { filename: true }
validate(
  schema, // 配置参数的结构描述
  options // 实例化插件时,传入的配置参数
)

这里我们有一个 schema 对象,描述了配置项的结构:一个对象,只能有 filename 属性,且该属性的值为字符串类型。

options 假设为实例化插件时传入的配置项,这里我故意给了一个错误的配置, filename 的值为布尔值。

于是 validate 方法抛出了错误,并说 filename 应该为字符串。

throw new _ValidationError.default(errors, schema, configuration);
    ^
ValidationError: Invalid configuration object. Object has been initialized using a configuration object that does not match the API schema.
 - configuration.filename should be a string.

下面我们通过开发一个插件为例,讲解如何写配置的格式检验。

假设我们要开发一款 HelloWorldPlugin 插件,作用是打包的时候,额外生成一个文件。

这个插件需要传入 filename 和 content 参数,其中 filename 是必填项,content 为选填。

schema.json

首先我们需要用到一个 schema.json 文件,用于描述配置项的结构。

{
  "type": "object",
  "properties": {
    "filename": {
      "description": "生成文件的名称",
      "type": "string",
      "link": "https://cn.bing.com/"
    },
    "content": {
      "description": "文件内容",
      "type": "boolean",
      "link": "https://cn.bing.com/"
    }
  },
  "required": ["filename"],
  "additionalProperties": false
}

描述一个属性的常用参数:

  • type: 属性类型。比如 string、boolean。
  • description: 对该属性的描述。当配置的类型不对时,description 会被打印出来,向开发者提供属性的相关信息
  • link: 属性的详细说明文档链接,同样会在类型错误时被打印出来。

对于一个对象:

  • required 是一个字符串数组,描述当前对象的哪些属性是必填项。
  • additionalProperties 表示能否使用没被显式声明的其他属性名,默认值为 true。

描述一个 JSON 对象的模式是非常复杂的,更多用法可以去 JSON Schema 官网查阅相关文档。

插件中的写法

下面我们再看看插件类如何编写。

const { validate } = require("schema-utils");
const schema = require('./schema.json')
class HelloWorldPlugin {
  options;
  constructor(options) {
    validate(schema, options);
    // 如果 validate 没有报错,下面的语句就能正确执行
    this.options = options;
  }
  apply() {
    console.log('apply');
  }
}
module.exports = HelloWorldPlugin;

很简单,引入 schema.json 赋值给 schema 对象,然后在构造函数中将 schema 和传入的插件配置传入到 validate 方法中。

不能通过检验的话,脚本会终止运行并提供错误信息。如果校验通过,我们就继续执行后续的业务逻辑,比如将配置项保存起来。

修改报错时输出的信息

有时候,我们希望可以配置一下报错时的报错信息,让信息更详尽一些。

此时我们就可以用到 validate 方法第三个可选的配置参数,这个参数用于修改报错时输出的信息。

validate(
  schema,
  options,
  {
    name: "【Hello World 插件】",
    baseDataPath: "配置项",
    postFormatter: (formattedError, error) => {
      // 做一些处理
      return formattedError;
    },
  }
);

这三个参数都是可选的。

  • name : 报错信息中的插件名,默认值为字符串值 "Object"。
  • baseDataPath: 默认值为 "configuration"。

这两个参数也可以改放到 schema.json,只需要在最上层的对象加多一个 "title" 属性即可。这个属性会以最后一个空格符将字符串分隔,拿到 name 和 baseDataPath。

{
  "title": "【Hello World 插件】 配置项"
  "type": "object",
   // ...
}

如果二者都使用了,优先使用 validate 方法传入的配置。

  • postFormatter 是一个函数,用于修改报错信息。

postFormatter 能够拿到即将输出的错误信息字符串 formattedError,我们可以修改它然后返回,就能打印出修改过的错误信息内容。

另一个 error 参数则是一个描述了具体错误信息的对象,比如你可以通过 error.keyword 知道当前错误的类型。

默认的输出内容:

添加了上面的配置后的输出结果:

结尾

schema-utils 是 webpack 官方提供的配置项检验库,能够帮助我们校验传入配置正确与否,并能在匹配不对时,打印出比较详细的报错信息。

暴露的 validate 方法接受 对象描述结构(schema)、插件配置(options)以及 报错信息配置(config)。

描述对象结构使用了 JSON Schema 标准,比较复杂,不过掌握一些比较常用的属性其实已经够用了。

到此这篇关于使用 Schema-Utils 对 Webpack Plugin 进行配置项校验的文章就介绍到这了,更多相关Webpack Plugin配置项校验内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Webpack中SplitChunksPlugin 配置参数详解

    代码分割本身和 webpack 没有什么关系,但是由于使用 webpack 可以非常轻松地实现代码分割,所以提到代码分割首先就会想到使用 webopack 实现. 在 webpack 中是使用 SplitChunksPlugin 来实现的,由于 SplitChunksPlugin 配置参数众多,接下来就来梳理一下这些配置参数. 官网上的默认配置参数如下: module.exports = { //... optimization: { splitChunks: { chunks: 'async'

  • extract-text-webpack-plugin用法详解

    一 背景 最近在做一个项目,项目本身是用vue-cli创建的单页面应用,由于项目扩展需要创建多页面,所以需要对不同的html分别进行css文件打包.于是开始研究extract-text-webpack-plugin插件. 二 插件介绍 打包样式有两种方法,一种是使用style-loader自动将css代码放到生成的style标签中,并且插入到head标签里.另一种就是使用extract-text-webpack-plugin插件,将样式文件单独打包,打包输出的文件由配置文件中的output属性指

  • 浅谈Webpack4 plugins 实现原理

    目录 前言 认识 实践出真知 前言 在 wabpack 中核心功能除了 loader 应该就是 plugins 插件了,它是在webpack执行过程中会广播一系列事件,plugin 会监听这些事件并通过 webpack Api 对输出文件做对应的处理, 如 hmlt-webpack-plugin 就是对模板魔剑 index.html 进行拷贝到 dist 目录的 认识 先来通过源码来认识一下 plugins 的基本结构 https://github.com/webpack/webpack/blo

  • 使用 Schema-Utils 对 Webpack Plugin 进行配置项校验的简单用例

    目录 schema.json 插件中的写法 修改报错时输出的信息 结尾 今天来学习如何使用 webpack 官方提供的 schema-utils 库. schema-utils 库用于在 loader 和 plugin 实例化时,对传入的参数进行校验. 如果格式正确,无事发生;如果错误,控制台会显示出比较详细的报错信息,并中断脚本的执行. 我们看个简单的用例: const { validate } = require("schema-utils"); const schema = {

  • 超级详细的webpack Plugin讲解

    目录 一.pulgin 的作用 二.pulgin 配置方式 三.pulgin 的本质 四.常见的 pulgin 4-1 html-webpack-plugin 4-2 clean-webpack-plugin 4-3 mini-css-extract-plugin 4-4 DefinePlugin 4-5 copy-webpack-plugin 总结 一.pulgin 的作用 pulgin 就是“插件”的意思,主要目的就是解决 loader 无法实现的事情,loader 只是用作于将特定的模块进

  • webpack+vue+express(hot)热启动调试简单配置方法

    前言 最近搞vue+webpack,vue的api还是比较容易懂的,每次build很复杂,这里就介绍下热启动调试吧,心累~~~ ITDogFire –sky 工具及目录 所用的到的简单工具 webstorm +vue +webpack +express,小项目都是官方down下来的. 目录介绍如下 package { "name": "yx", "version": "1.0.0", "description&quo

  • webpack常用配置项配置文件介绍

    一.webpack基础 1.在项目中生成package.json:在项目根目录中输入npm init,根据提示输入相应信息.(也可以不生成package.json文件,但是package.json是很有用的,所有建议生成) 2.安装webpaack a.在全局中安装webpack:npm install webpack -g b.将webpack安装到项目并将webpack写入package.json的devDependencies中:进入项目根目录,然后在命令行中输入npm install w

  • vue-cli的webpack模板项目配置文件分析

    由于最近在vue-cli生成的webpack模板项目的基础上写一个小东西,开发过程中需要改动到build和config里面一些相关的配置,所以刚好趁此机会将所有配置文件看一遍,理一理思路,也便于以后修改配置的时候不会"太折腾". 一.文件结构 本文主要分析开发(dev)和构建(build)两个过程涉及到的文件,故下面文件结构仅列出相应的内容. ├─build │ ├─build.js │ ├─check-versions.js │ ├─dev-client.js │ ├─dev-ser

  • vue-cli中的webpack配置详解

    版本号 vue-cli 2.8.1 (终端通过vue -V 可查看) vue 2.2.2 webpack 2.2.1 目录结构 ├── README.md ├── build │ ├── build.js │ ├── check-versions.js │ ├── dev-client.js │ ├── dev-server.js │ ├── utils.js │ ├── vue-loader.conf.js │ ├── webpack.base.conf.js │ ├── webpack.de

  • 详解vue2.0脚手架的webpack 配置文件分析

    前言 作为 Vue 的使用者我们对于 vue-cli 都很熟悉,但是对它的 webpack 配置我们可能关注甚少,今天我们为大家带来 vue-cli#2.0 的 webpack 配置分析 vue-cli 的简介.安装我们不在这里赘述,对它还不熟悉的同学可以直接访问 vue-cli 查看 目录结构 . ├── README.md ├── build │ ├── build.js │ ├── check-versions.js │ ├── dev-client.js │ ├── dev-server

  • vue-cli webpack模板项目搭建及打包时路径问题的解决方法

    这里建议刚学vue的同学第一个小案例不要使用vue-cli进行操作,待对基本的api使用的比较顺手了之后再进行vue-cli的体验比较好.本人是一名后端开发人员,接触前端时间不长,这里有说的不好的地方,还请大家评论建议下. 1. 安装必要的环境准备 首先我们要能够暗转node.js,这个环境.百度搜索node,进入官网根据自己的操作系统进行下载即可.现在的版本都是自带npm的了.所以安装后,环境变量正常情况下会自动配置,开启一个命令行终端,输入node,npm,就可以看到相应的信息.那么说明安装

  • vue-cli webpack配置文件分析

    相信vue使用者对vue-cli都不会陌生,甚至可以说,很熟悉了,但对其webpack的配置可能知之甚少吧. 过完年回来后,我接手了公司的新项目.新项目是一个spa.很自然,我就想到了vue-cli脚手架了,当时研究一下它的webpack配置.于是,就有了其他的内容. 今天这篇文章,是在原来的基础上,增加了一些新版本的内容,但实质上变化不大. 说明 此仓库为vue-cli webpack的配置分析,其实只是在源码中加上注释而已.大家查看详细分析,可以从后面提到的入口文件开始查看. 分析不包括ch

  • 详解vue-cli脚手架中webpack配置方法

    什么是webpack webpack是一个module bundler(模块打包工具),所谓的模块就是在平时的前端开发中,用到一些静态资源,如JavaScript.CSS.图片等文件,webpack就将这些静态资源文件称之为模块 webpack支持AMD和CommonJS,以及其他的一些模块系统,并且兼容多种JS书写规范,可以处理模块间的以来关系,所以具有更强大的JS模块化的功能,它能对静态资源进行统一的管理以及打包发布,在官网中用这张图片介绍: 它在很多地方都能替代Grunt和Gulp,因为它

随机推荐