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

2022-12-26 08:56:54 浏览数 (1)

开发一款优秀的插件功能固然重要，但是让开发者友好的进行使用也发挥着同样重要的作用呢，我们在使用公共的一些webpack插件时通常会按自己的理解和属性的命名来进行传值，很可能就因为意外的参数类型出现未知的问题，[schema-utils](https://github.com/webpack/schema-utils)包可以为loader和plugin的选项做友好的类型验证，现在就让我们一起来通过使用schema-utils包加强一下我们插件的选项吧。

1. 准备一个最小Webpack插件演示选项校验
代码语言：javascript复制
// ① 定义插件类
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文件用来定义选项的结构，类型，描述信息。
代码语言：javascript复制
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。
代码语言：javascript复制
const validate = require('schema-utils').validate;
const schema = require('./options.schema');
4. 在什么时候进行校验？

先看一下webpack插件的使用方式。

代码语言：javascript复制
module.exports = {
 mode: 'development',
 plugins: [new HelloWorldPlugin({ name: "HelloWorldPlugin" })],
};

从使用来看我们需要在实例化插件对象的时候做校验，当然插件文档的编写也是这么写的。

为validate函数传入schema配置和options对象；

参数3的配置主要体现在出错时候的日志中；

参数3中还可以配置postFormatter函数对错误信息进行格式化处理。

代码语言：javascript复制
constructor(options = {}) {
  validate(schema, options, {
 name: 'HelloWorldPlugin',
 baseDataPath: 'options',
  });
  this.options = options;
}
5. 错误说明：

webpack在加载webpack.config.js时发生错误；

<插件名>插件的options传入无效；

选项的属性应该是类型；

属性的描述信息。

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

webpack 打包 javascript

0 人点赞