JS每日一题:Webpack如何实现一个Loader？

HollisChuang 发布于2019-08-26 13:42 / 1416人阅读

摘要：期如何实现一个我们在上几节有讲过今天我们来深入了解它们最暴力的方式莫过于动手实现它们好了，回到正题先来回顾一下定义用于对模块的源代码进行转换。可以使你在或加载模块时预处理文件简单使用是导出为一个函数的模块。

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

注绝不仅限于完成当天任务，更多是查漏补缺，学习群内其它同学优秀的答题思路

点击加入答题

云服务器 GPU云服务器 js如何创建一个标签 js如何清除一个函数 js如何实现隔行变色 js如何实现条件筛选

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109356.html

JS每日一题：Webpack有哪些常见的Loader？他们是解决什么问题的？

摘要：期有哪些常见的他们是解决什么问题的在回答之前我们先来了解一下我们在上一节讲过，是属于模块化方案，他能让任意类型的文件都能运行在浏览器中，怎么做到呢这时就有了定义用于对模块的源代码进行转换。 20190326期 Webpack有哪些常见的Loader？他们是解决什么问题的？在回答之前我们先来了解一下Loader 我们在上一节讲过，webpack是属于模块化方案，他能让任意类型的文件都能...

Hanks10100 2019-08-23 16:28 评论0 收藏0
JS每日一题:Webpack有哪些常见的Plugin？他们是解决什么问题的

摘要：期有哪些常见的他们是解决什么问题的定义音译过来就是插件在中插件目的在于解决无法实现的其他事插件是一个具有属性的对象。 20190327期 Webpack有哪些常见的Plugin？他们是解决什么问题的定义: 音译过来就是插件, 在webpack中, 插件目的在于解决 loader 无法实现的其他事 webpack 插件是一个具有 apply 属性的 JavaScript 对象。appl...

songze 2019-08-23 16:31 评论0 收藏0
我的前端面试

摘要：前言这次找工作也面了好几家公司，也通过了好几家公司的面试，毕竟之前也准备了一段时间，所以面试的时候心里也不是很虚。的代码分割怎么实现的说说刚才提到的和的区别前端缓存怎么实现扯扯强缓存和协商缓存，重点问了如何实现缓存二面就聊了项目。。。前言这次找工作也面了好几家公司，也通过了好几家公司的面试，毕竟之前也准备了一段时间，所以面试的时候心里也不是很虚。这里记录一下面试过程中被问到的问题...

meteor199 2019-08-26 13:29 评论0 收藏0
JS每日一题：如何理解es6中的Proxy？

20190124问: 如何理解es6中的Proxy？试题解析:对proxy的理解，可能会延伸到vue的双向绑定 Proxy（代理）定义可以理解为为目标对象架设一层拦截，外界对该对象的访问，都必须通过这层拦截简单示例: const obj = new Proxy({}, { get: (target, key, receiver) => { return JS ...

tinysun1234 2019-08-23 14:58 评论0 收藏0
JS每日一题：如何理解es6中的Proxy？

20190124问: 如何理解es6中的Proxy？试题解析:对proxy的理解，可能会延伸到vue的双向绑定 Proxy（代理）定义可以理解为为目标对象架设一层拦截，外界对该对象的访问，都必须通过这层拦截简单示例: const obj = new Proxy({}, { get: (target, key, receiver) => { return JS ...

PumpkinDylan 2019-08-02 14:09 评论0 收藏0