当前位置: 首页 > 科技观察

使用Schema-Utils验证WebpackPlugin的配置项

时间:2023-03-22 10:23:05 科技观察

大家好,我是前端西瓜哥。今天就来学习一下如何使用webpack官方提供的schema-utils库。schema-utils库用于验证加载程序和插件实例化时传入的参数。如果格式正确,则什么也不会发生;如果错误,控制台将显示更详细的错误信息并中断脚本的执行。让我们看一个简单的用例:const{validate}=require("schema-utils");constschema={"type":"object","properties":{"filename":{"type":"string",}},"additionalProperties":false}constoptions={filename:true}validate(架构,//配置参数的结构描述options//插件实例化时传入的配置参数)这里我们有一个schema对象,描述配置项的结构:一个对象只能有一个filename属性,这个的值属性是字符串类型。options假定为实例化插件时传入的配置项。这里我故意给错了配置,filename的值为boolean值。所以validate方法会抛出一个错误,指出文件名应该是一个字符串。抛出新的_ValidationError.default(错误,模式,配置);^ValidationError:无效的配置对象。已使用与API模式不匹配的配置对象初始化对象。-configuration.filename应该是一个字符串。下面我们开发一个以插件为例,讲解如何编写配置格式校验。假设我们要开发一个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:属性类型。比如字符串,布尔值。描述:属性的描述。当配置类型不正确时,会打印出描述信息,为开发者提供该属性的相关信息。link:类型不正确时,也会打印出该属性的详细文档链接。对于一个对象:required是一个字符串数组,描述当前对象的哪些属性是必需的。additionalProperties表示是否可以使用其他未显式声明的属性名,默认值为true。描述JSON对象的模式非常复杂。更多使用请参考JSONSchema官网相关文档。插件中的写法下面来看看插件类的写法。const{validate}=require("schema-utils");constschema=require('./schema.json')classHelloWorldPlugin{选项;构造函数(选项){验证(模式,选项);//如果validate没有报错,则可以正确执行下面的语句this.options=options;}apply(){console.log('apply');}}module.exports=HelloWorldPlugin;很简单,导入schema.json赋值给schema对象,然后在构造函数中将schema和传入的插件配置传入validate方法。如果检查失败,脚本将终止并显示一条错误消息。如果验证通过,我们继续执行后续的业务逻辑,比如保存配置项。修改报错时的输出信息有时候,我们希望配置报错时的错误信息,让信息更详细。此时我们可以使用validate方法的第三个可选配置参数,用于在报错时修改输出信息。validate(schema,options,{name:"【HelloWorldPlugin】",baseDataPath:"ConfigurationItem",postFormatter:(formattedError,error)=>{//做一些处理returnformattedError;},});这三个参数是可选的。name:错误信息中插件的名称,默认值为字符串值“Object”。baseDataPath:默认值为“配置”。这两个参数也可以改成schema.json,只需要在顶层对象上加一个“title”属性即可。该属性将用最后一个空格字符分隔字符串以获取名称和baseDataPath。{"title":"【HelloWorldPlugin】配置项""type":"object",//...}如果两者都使用,则优先使用validate方法传入的配置。postFormatter是一个用来修改错误信息的函数。postFormatter可以得到要输出的错误信息字符串formattedError,我们可以对其进行修改并返回,修改后的错误信息内容可以打印出来。另一个错误参数是描述具体错误信息的对象。比如通过error.keyword可以知道当前错误的类型。默认输出内容:添加以上配置后的输出:最后schema-utils是webpack官方提供的配置项检测库,可以帮助我们验证传入的配置是否正确,匹配时可以打印出来不正确更详细的错误信息。暴露的验证方法接受对象描述结构(模式)、插件配置(选项)和错误消息配置(配置)。JSONSchema标准用于描述对象结构,比较复杂,但掌握一些常用的属性就足够了。