JS每日一題:Webpack如何實現一個Loader？

HollisChuang 發布于2019-08-26 13:42 / 1428人閱讀

摘要：期如何實現一個我們在上幾節有講過今天我們來深入了解它們最暴力的方式莫過于動手實現它們好了，回到正題先來回顧一下定義用于對模塊的源代碼進行轉換。可以使你在或加載模塊時預處理文件簡單使用是導出為一個函數的模塊。

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如何實現條件篩選

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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