使你的webpack插件变得更加优秀

2021-09-23 430 阅读2分钟

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

开发一款优秀的插件功能固然重要，但是让开发者友好的进行使用也发挥着同样重要的作用呢，我们在使用公共的一些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" })],
};

从使用来看我们需要在实例化插件对象的时候做校验，当然插件文档的编写也是这么写的。
1. 为validate函数传入schema配置和options对象；
2. 参数3的配置主要体现在出错时候的日志中；
3. 参数3中还可以配置postFormatter函数对错误信息进行格式化处理。

constructor(options = {}) {
  validate(schema, options, {
    name: 'HelloWorldPlugin',
    baseDataPath: 'options',
  });
  this.options = options;
}

5. 错误说明：

webpack在加载webpack.config.js时发生错误；
<插件名>插件的options传入无效；
选项的属性应该是类型；
属性的描述信息。

在正式执行插件前正确获取选项，将避免错误类型导致插件执行得到意外的结果

我是小鑫同学：

😇熟悉：安卓开发，前端开发。
🤪了解：后端开发，脚本开发。
🧐特长：解决编码中的疑难杂症。
😇座右铭：积跬步以至千里，积小流以成江海。