四时宝库

程序员的知识宝库

11、描述一下编写 loader 或 plugin 的思路?(高薪常问)

1、基本定义

Loader 像一个"翻译官"把读到的源文件内容转义成新的文件内容,并且每个 Loader 通过链式操作,将源文件一步步翻译成想要的样子。

2、 编写思路

(2.1)编写 Loader 时要遵循单一原则,每个 Loader 只做一种"转义"工作, 每个 Loader的拿到的是源文件内容(source),可以通过返回值的方式将处理后的内容输出,也可以调用this.callback()方法,将内容返回给 webpack,还可以通过 this.async()生成一个 callback 函数,再用这个 callback 将处理后的内容输出出去,此外 webpack 还为开发者准备了开发 loader 的工具函数集——loader-utils。

(2.2)相对于 Loader 而言,Plugin 的编写就灵活了许多, webpack 在运行的生命周期中会广播出许多事件,Plugin 可以监听这些事件,在合适的时机通过 webpack 提供的 API 改变输出结果。

3、 编写注意事项

(3.1)Loader 支持链式调用,所以开发上需要严格遵循“单一职责”,每个 Loader 只负责自己需要负责的事情。

(3.2)Loader 运行在 node.js 中,我们可以调用任意 node.js 自带的 API 或者安装第三方模块进行调用。

(3.3)webpack 传给 Loader 的原内容都是 UTF-8 格式编码的字符串,当某些场景下Loader 处理二进制文件时,需要通过 exports.raw = true 告诉 webpack 该 Loader 是否需要二进制数据。

(3.4)尽可能的异步化 Loader,如果计算量很小,同步也可以。

(3.5)Loader 是无状态的,我们不应该在 Loader 中保留状态。

(3.6)使用 loader-utils 和 schema-utils 为我们提供的实用工具。

(3.7)加载本地 Loader 方法。

发表评论:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言
    友情链接