Loader學習，簡析babel-loader

xiaobin發表於2019-03-11
Babel

什麼是Loader?

繼上兩篇文章webpack工作原理介紹（上篇、下篇）,我們瞭解到Loader：模組轉換器，也就是將模組的內容按照需求裝換成新內容，而且每個Loader的職責都是單一，只會完成一種轉換，所以我們一般對原始檔的處理，也是由多個Loader以鏈式順序執行的方式來進行多次裝換，然後得到我們要的結果。

那麼這樣Loader只需要關心輸入和輸出，Loader其實是一個Node.js模組，該模組匯出的是一個函式（意味著，所有node.js的api我們都可以使用），如下：

    module.exports = function (source) {
        // 對source做一系列的轉換
        return source;
    }
複製程式碼

下面我們介紹一下webpack提供了哪些供Loader呼叫的api，對Loader有個比較深刻的理解，然後來分析babel-loader的原始碼，看看我們常用的loader是怎麼編寫出來的。

獲得Loader的options

    const loaderUtils = require('loader-utils');
    module.exports = function(source) {
        // 獲取使用者為當前Loader傳入的options
        console.log(loaderUtils.getOptions(this));
        return source;
    }
複製程式碼

返回其他結果

如上，我們返回的是轉換後的內容，但是有些情況下，我們不僅僅需要返回轉換後的內容，還需要返回一些其他的內容，如sourceMap或是AST語法樹，那麼這時候我們可以使用webpack提供的APIthis.callback，當使用this.callback了，那麼我們就必須需要在Loader函式返回undefined,以此來讓webpack知道返回的結果在this.callback中，API詳細引數如下：

    this.callback(
        // 無法裝換原內容時的Error
        err: Error || null,
        // 裝換後的的內容，如上述的source
        content: string | Buffer,
        // 用於通過裝換後的內容得出原內容的Source Map，方便除錯
        // 我們瞭解到，SourceMap我們只是會在開發環境去使用，於是就會變成可控制的，
        // webpack也提供了this.sourceMap去告訴是否需要使用sourceMap，
        // 當然也可以使用loader的option來做判斷，如css-loader
        sourceMap?: SourceMap,
        // 如果本次轉換同時生成ast語法樹，也可以將這個ast返回，方便後續loader需要複用該ast，這樣可以提高效能
        abstractSyntaxTree? AST
    );
複製程式碼

同步與非同步

看看非同步Loader在this.asyncAPI下如何實現，

    module.exports = async function (source) {
        const callback = this.async();
        const { err, content, sourceMap, AST } = await Func();
        callback(err, content, sourceMap, AST); // 如上訴`this.callback`引數一樣
    }
複製程式碼

處理二進位制資料

像file-loader這樣的Loader，處理的是二進位制資料，那麼就需要告訴webpack給loader傳入二進位制格式的資料，程式碼可以如下：

    module.exports = function(source) {
        if (source instanceof Buffer) {
            // 一系列操作
            return source; //當然我本身也可以返回二進位制資料提供給下一個loader
        }
    }
    moudle.exports.raw = true; //不設定，就會拿到字串
複製程式碼

通過moudle.exports.raw = true;告知webpack，自己本身需要二進位制資料。

快取加速

優化的最佳點，可以使用this.cacheable(Boolen)，快取loader轉換後的內容，當處理檔案或依賴檔案沒有發生變化時，使用快取的轉換內容，以此提速！

其他API

說到學習，當然越系統越好了，api多介紹 ，除了上面常用的api之外，還存在以下常用的api。

  • this.context: 當前處理轉換的檔案所在的目錄
  • this.resource: 當前處理轉換的檔案完整請求路徑，包括querystring
  • this.resourcePath: 當前處理轉換的檔案的路徑
  • this.resourceQuery: 當前處理檔案的querystring
  • this.target: webpack配置的target
  • this.loadMoudle: 處理檔案時，需要依賴其他檔案的處理結果時，可以使用this.loadMoudle(request: string, callback: function(err, source, sourceMap, module))去獲取到依賴檔案的處理結果。
  • this.resolve: 獲取指定檔案的完整路徑，this.resolve(context: string, request: string, callback: function(err, result: string))
  • this.addDependency: 為當前處理檔案新增依賴檔案，以便依賴檔案發生變化時重新呼叫Loader轉換該檔案,this.addDependency(file: string)
  • this.addContextDependency: 為當前處理檔案新增依賴檔案目錄，以便依賴檔案目錄裡檔案發生變化時重新呼叫Loader轉換該檔案，this.addContextDependency(dir: string)
  • this.clearDependencies: 清除當前正在處理的檔案的所有依賴
  • this.emitFile: 輸出一個檔案，使用的方法為this.emitFile(name: string, content: Buffer | string, sourceMap: {...})

babel-loader原始碼簡析

原始碼第一行如下：

    let babel;
    try {
        babel = require("@babel/core");
    } catch (err) {
        if (err.code === "MODULE_NOT_FOUND") {
            err.message +=
            "\n babel-loader@8 requires Babel 7.x (the package '@babel/core'). " +
            "If you'd like to use Babel 6.x ('babel-core'), you should install 'babel-loader@7'.";
        }
        throw err;
    }
複製程式碼

babel-loader依賴了@babel/core,這就是安裝babel-loader需要同時安裝@babel/core（通常會再安裝babel-preset-env、babel-plugin-transform-runtime、babel-runtime）的原因。我們接下去看，src/index.js整個檔案是不是按照我們前面所講編寫Loader的方法來組織程式碼的。

//引入package.json
const pkg = require("../package.json");
/* 
根據babel-loader是否配置cacheDirectory屬性來告訴
babel-loader是否快取loader的執行結果，如果true，
便會使用cache方法去實現，`cache.js`檔案有著read、write、filename（檔案命名方法）
以及如何處理快取的handleCache方法（有則讀，無則寫再讀），有興趣可以去看看。
*/
const cache = require("./cache");
/*
    transfrom.js用來轉換內容，內部呼叫了babel.transform方法進行轉換，這裡簡單介紹一下babel的原理：
    babylon將es6/es7程式碼解析成ast，babel-traverse對ast進行轉譯，得到新的ast，新的ast通過
    babel-generator轉換成es5，核心方法在@babel/core/lib/transformation/index.js中的`runSync`
    方法，有興趣可以去了解一下。
*/
const transform = require("./transform");
const injectCaller = require("./injectCaller");
const path = require("path");
// 獲取Loader引數options
const loaderUtils = require("loader-utils");

module.exports = makeLoader();
module.exports.custom = makeLoader;

function makeLoader(callback) {
  const overrides = callback ? callback(babel) : undefined;

  return function(source, inputSourceMap) {
    // 上面介紹過的api可以得知，這是個非同步Loader,做的是非同步裝換的工作
    const callback = this.async();

    loader
      .call(this, source, inputSourceMap, overrides)
      .then(args => callback(null, ...args), err => callback(err));
  };
}

async function loader(source, inputSourceMap, overrides) {
    ....
}

複製程式碼

可以看到確實和我們Loader編寫方式是一樣的，通過module.exports = makeLoader();匯出一個函式，makeLoader()是一個高階函式，又返回了一個函式，通過const callback = this.async();可以知道，這是一個非同步的loader，不難看出最重要的實現都在這一步函式loader裡面了，那麼到底在loader函式裡面究竟做了些什麼呢？我們來看看，在閱讀原始碼前，最好先看看babel-loader的README，先做個基本瞭解.

上面程式碼可以看出loader(source, inputSourceMap, overrides)函式入參有三個，分別是source=>待轉換的code，inputSourceMap=>上一個loader處理後的sourceMap,有的話，overrides=>自定義載入器，整塊原始碼可以分成幾部分，

  • let loaderOptions = loaderUtils.getOptions(this) || {};，獲取options，並且獲取當前處理轉換的檔案的路徑this.resourcePath。
  • 判斷是否自定義載入器轉換，這裡會進行一系列對options.customize進行判斷，options.customize一個相對路徑，loader函式引數overrides為空時起效，執行let override = require(loaderOptions.customize);，有了override之後，後續邏輯（如轉換、獲取option）override都會進行介入處理。
  • 將函式傳入引數和LoaderOptions歸併，得到programmaticOptions。
  • 呼叫babel.loadPartialConfig可以拿到babel配置並賦值給config變數,其實就是為了允許系統輕鬆操作和驗證使用者的配置，此功能解決了外掛和預設
  • 生成cacheIdentifier
  • 判斷options.cacheDirectory是否需要快取Loader轉換內容，如為true，呼叫cache.js的module.export Cache方法（上面已做介紹）
  • config.babelrc不為空，則有.babelrc檔案，依賴.babelrc檔案變化，使用this.addDependency(config.babelrc);
  • metadataSubscribers 訂閱後設資料，主要作用是訂閱一些編譯過程中的一些後設資料，訂閱以後這些後設資料將會被新增 到webpack的上下文中。通常我們是用不上的，估計在某些babel-plugin中可能會使用到。
  • 最後將處理後的結果返回

小結

每一個Loader其實返回值就是一個Function，而且就是把帶轉換內容傳入，得到轉換後的內容，做的事情就是這樣，這篇文章先對Loader的基本概念進行介紹，並且瞭解webpack為Loader的編寫提供一些常用的API,最後通過簡析babel-loader的原始碼，我覺得應該差不多知道如何去寫一個簡單的Loader了。我的部落格

相關文章