資訊專欄INFORMATION COLUMN
摘要：期如何實現(xiàn)一個我們在上幾節(jié)有講過今天我們來深入了解它們最暴力的方式莫過于動手實現(xiàn)它們好了，回到正題先來回顧一下定義用于對模塊的源代碼進(jìn)行轉(zhuǎn)換。可以使你在或加載模塊時預(yù)處理文件簡單使用是導(dǎo)出為一個函數(shù)的模塊。
20190329期
如何實現(xiàn)一個Loader？
我們在上幾節(jié)有講過loader,今天我們來深入了解它們,最暴力的方式莫過于動手實現(xiàn)它們
好了，回到正題, 先來回顧一下loader
loader定義: 用于對模塊的源代碼進(jìn)行轉(zhuǎn)換。loader 可以使你在 import 或"加載"模塊時預(yù)處理文件
簡單使用
module.exports = {
//...
module: {
rules: [
{
test: /.js$/,
use: [
{
// loader 是導(dǎo)出為一個a函數(shù)的 node 模塊。該函數(shù)在 loader 轉(zhuǎn)換資源的時候調(diào)用
// 給定的函數(shù)將調(diào)用 loader API，并通過 this 上下文訪問
loader: path.resolve("loader.js"),
options: {/* ... */}
}
]
}
]
}
};
回顧了loader的定義及簡單使用后，我們再來分析一下實現(xiàn)loader的思路
單一職責(zé),一個loader只做一件事
鏈?zhǔn)浇M合,鏈中的每個 loader 會將轉(zhuǎn)換應(yīng)用在已處理過的資源上
模塊化,是導(dǎo)出為一個函數(shù)的 node 模塊
參數(shù)合并,loader 可以通過 options 對象配置
基于上面分析的幾點，我們開始動手
// 這個就是一個最簡單loader，
// 如果我們的loader有依賴其它模塊，也得以module的寫法將在在頂部引入
import fs from "fs";
export default function(source){
return source
}
我們發(fā)現(xiàn)上面直接使用了return,是因為是同步類的loader且返回的內(nèi)容唯一,如果你希望你的loader支持鏈?zhǔn)秸{(diào)用，將結(jié)果返給下一個loader繼續(xù)使用，這時候就需要用webpack提供的api
這里我們簡單看一下this.callback的定義,一個可以同步或者異步調(diào)用的可以返回多個結(jié)果的函數(shù)。預(yù)期的參數(shù)是
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對沒有研究過的聽上去好像有點難，事實上, 掌握上面所介紹的內(nèi)容及思想，就可以開始寫一個簡單的 Loader 了, 我們再來用簡單的代碼綏一下loader到底是什么?
// 首先loader它是一個node模塊，這很好理解
export const lessToCss = function(source, other) {
// source 就是你即將要轉(zhuǎn)換的文件源
// TODO
// 將轉(zhuǎn)換好的文件源流轉(zhuǎn)至一個管道
this.callback(null, source, other)
}
loader api中有幾個好用的家伙這里就順便帶一下
this.cacheable() 從提高執(zhí)行效率上，如何處理利用緩存是極其重要的, webpack 中this.cacheable就可以輕松將loader緩存了
this.async() 當(dāng)一個loader無依賴時，我們應(yīng)該異步的去返回結(jié)果
下方貼上less-loader的源碼，代碼很簡潔，結(jié)合上方我們所分析的，也很容易理解
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));
}
總結(jié)
loader是一個node模塊
編寫loader時要遵循單一原則，每個loader只做一種"轉(zhuǎn)義"工作
webpack為我們提供了豐富的loader api
webpack為我們還提供了工具函數(shù)集——loader-utils
關(guān)于JS每日一題JS每日一題可以看成是一個語音答題社區(qū)
每天利用碎片時間采用60秒內(nèi)的語音形式來完成當(dāng)天的考題
群主在次日0點推送當(dāng)天的參考答案
注 絕不僅限于完成當(dāng)天任務(wù)，更多是查漏補(bǔ)缺，學(xué)習(xí)群內(nèi)其它同學(xué)優(yōu)秀的答題思路
點擊加入答題
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/109356.html
摘要：期有哪些常見的他們是解決什么問題的在回答之前我們先來了解一下我們在上一節(jié)講過，是屬于模塊化方案，他能讓任意類型的文件都能運(yùn)行在瀏覽器中，怎么做到呢這時就有了定義用于對模塊的源代碼進(jìn)行轉(zhuǎn)換。 20190326期 Webpack有哪些常見的Loader？他們是解決什么問題的？ 在回答之前我們先來了解一下Loader 我們在上一節(jié)講過，webpack是屬于模塊化方案，他能讓任意類型的文件都能...
摘要：期有哪些常見的他們是解決什么問題的定義音譯過來就是插件在中插件目的在于解決無法實現(xiàn)的其他事插件是一個具有屬性的對象。 20190327期 Webpack有哪些常見的Plugin？他們是解決什么問題的 定義: 音譯過來就是插件, 在webpack中, 插件目的在于解決 loader 無法實現(xiàn)的其他事 webpack 插件是一個具有 apply 屬性的 JavaScript 對象。appl...
20190124問: 如何理解es6中的Proxy？ 試題解析:對proxy的理解，可能會延伸到vue的雙向綁定 Proxy（代理） 定義 可以理解為為目標(biāo)對象架設(shè)一層攔截，外界對該對象的訪問，都必須通過這層攔截 簡單示例: const obj = new Proxy({}, { get: (target, key, receiver) => { return JS ...
20190124問: 如何理解es6中的Proxy？ 試題解析:對proxy的理解，可能會延伸到vue的雙向綁定 Proxy（代理） 定義 可以理解為為目標(biāo)對象架設(shè)一層攔截，外界對該對象的訪問，都必須通過這層攔截 簡單示例: const obj = new Proxy({}, { get: (target, key, receiver) => { return JS ...
閱讀 1958·2021-11-23 09:51
閱讀 1609·2021-11-19 09:40
閱讀 3272·2021-11-11 11:01
閱讀 1218·2021-09-27 13:34
閱讀 1912·2021-09-22 15:56
閱讀 2198·2019-08-30 15:52
閱讀 1132·2019-08-30 14:13
閱讀 3550·2019-08-30 14:10
