开发一款优秀的插件功能固然重要，但是让开发者友好的进行使用也发挥着同样重要的作用呢，我们在使用公共的一些webpack插件时通常会按自己的理解和属性的命名来进行传值，很可能就因为意外的参数类型出现未知的问题，[schema-utils](https://github.com/webpack/schema-utils)包可以为loader和plugin的选项做友好的类型验证，现在就让我们一起来通过使用schema-utils包加强一下我们插件的选项吧。
1. 准备一个最小Webpack插件演示选项校验
// ① 定义插件类 class HelloWorldPlugin { // ② 实现apply函数(固定写法),提供给编译器调用 apply(compiler) { // ③ hook对应的生命周期 compiler.hooks.done.tap( 'Hello World Plugin', ( stats ) => { // ④ 做具体的功能实现 console.log('Hello World!'); } ); } } module.exports = HelloWorldPlugin; 复制代码
2. 新建一个options.schema.js文件用来定义选项的结构，类型，描述信息。
const schema = { // 一般插件的构造器接收一个options对象 type: 'object', // 定义选项中各个属性的类型 properties: { // 属性名称 name: { // 属性类型 type: 'string', // 属性描述 description: "The plug-in name.", }, }, // 是否允许添加额外的属性,禁止的情况下,添加的属性必须在schema中定义 additionalProperties: false, }; module.exports = schema 复制代码
3. 导入schema-utils包和options.schema.js。
const validate = require('schema-utils').validate; const schema = require('./options.schema'); 复制代码
4. 在什么时候进行校验？
- 先看一下webpack插件的使用方式。
module.exports = { mode: 'development', plugins: [new HelloWorldPlugin({ name: "HelloWorldPlugin" })], }; 复制代码
- 从使用来看我们需要在实例化插件对象的时候做校验，当然插件文档的编写也是这么写的。
- 为validate函数传入
schema配置和options对象； - 参数3的配置主要体现在出错时候的日志中；
- 参数3中还可以配置
postFormatter函数对错误信息进行格式化处理。
constructor(options = {}) { validate(schema, options, { name: 'HelloWorldPlugin', baseDataPath: 'options', }); this.options = options; } 复制代码
5. 错误说明：
- webpack在加载webpack.config.js时发生错误；
- <插件名>插件的
options传入无效； - 选项的属性应该是类型；
- 属性的描述信息。
在正式执行插件前正确获取选项，将避免错误类型导致插件执行得到意外的结果
