JS逐日一题:Webpack怎样完成一个Loader？

2024年4月7日 104次阅读 来源: febobo

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点推送当天的参考答案

  • 注 毫不仅限于完成当天使命，更多是查漏补缺，进修群内别的同砚优异的答题思绪

点击到场答题

    原文作者：febobo
    原文地址: https://segmentfault.com/a/1190000018745920
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞