共计 2129 个字符，预计需要花费 6 分钟才能阅读完成。
20190329 期
如何实现一个 Loader？
我们在上几节有讲过 loader, 今天我们来深入了解它们, 最暴力的方式莫过于动手实现它们
好了，回到正题, 先来回顾一下 loader
loader 定义: 用于对模块的源代码进行转换。loader 可以使你在 import 或 ” 加载 ” 模块时预处理文件
简单使用
module.exports = {
//…
module: {
rules: [
{
test: /\.js$/,
use: [
{
// loader 是导出为一个 a 函数的 node 模块。该函数在 loader 转换资源的时候调用
// 给定的函数将调用 loader API，并通过 this 上下文访问
loader: path.resolve(‘loader.js’),
options: {/* … */}
}
]
}
]
}
};
回顾了 loader 的定义及简单使用后，我们再来分析一下实现 loader 的思路
单一职责, 一个 loader 只做一件事
链式组合, 链中的每个 loader 会将转换应用在已处理过的资源上
模块化, 是导出为一个函数的 node 模块
参数合并,loader 可以通过 options 对象配置
基于上面分析的几点，我们开始动手
// 这个就是一个最简单 loader，
// 如果我们的 loader 有依赖其它模块，也得以 module 的写法将在在顶部引入
import fs from ‘fs’;
export default function(source){
return source
}
我们发现上面直接使用了 return, 是因为是同步类的 loader 且返回的内容唯一, 如果你希望你的 loader 支持链式调用，将结果返给下一个 loader 继续使用，这时候就需要用 webpack 提供的 api
这里我们简单看一下 this.callback 的定义, 一个可以同步或者异步调用的可以返回多个结果的函数。预期的参数是
this.callback(
err: Error | null,
content: string | Buffer,
sourceMap?: SourceMap,
meta?: any
)
// loader-utils 它提供了很多有用的工具
// 最常用的一个就是获取传入 loader 的 options
import {getOptions} from ‘loader-utils’;
export default function(source, other) {
const options = getOptions(this)
// do whatever you want
// …
this.callback(null, source, other)
}
手写一个 loader 对没有研究过的听上去好像有点难，事实上, 掌握上面所介绍的内容及思想，就可以开始写一个简单的 Loader 了, 我们再来用简单的代码绥一下 loader 到底是什么?
// 首先 loader 它是一个 node 模块，这很好理解
export const lessToCss = function(source, other) {
// source 就是你即将要转换的文件源
// TODO
// 将转换好的文件源流转至一个管道
this.callback(null, source, other)
}
让你的 loader 更好用
loader api 中有几个好用的家伙这里就顺便带一下
this.cacheable() 从提高执行效率上，如何处理利用缓存是极其重要的, webpack 中 this.cacheable 就可以轻松将 loader 缓存了
this.async() 当一个 loader 无依赖时，我们应该异步的去返回结果
案例分析
下方贴上 less-loader 的源码，代码很简洁，结合上方我们所分析的，也很容易理解
import processResult from ‘./processResult’;
const render = pify(less.render.bind(less));
function lessLoader(source) {
const loaderContext = this;
const options = getOptions(loaderContext);
const done = loaderContext.async();
const isSync = typeof done !== ‘function’;
if (isSync) {
throw new Error(
‘Synchronous compilation is not supported anymore. See https://github.com/webpack-contrib/less-loader/issues/84’
);
}
processResult(loaderContext, render(source, options));
}
总结
loader 是一个 node 模块
编写 loader 时要遵循单一原则，每个 loader 只做一种 ” 转义 ” 工作
webpack 为我们提供了丰富的 loader api
webpack 为我们还提供了工具函数集——loader-utils
关于 JS 每日一题
JS 每日一题可以看成是一个语音答题社区 每天利用碎片时间采用 60 秒内的语音形式来完成当天的考题 群主在次日 0 点推送当天的参考答案
注 绝不仅限于完成当天任务，更多是查漏补缺，学习群内其它同学优秀的答题思路
点击加入答题
