成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

webpack源碼分析之三：loader

laznrbfe / 951人閱讀

摘要：本次介紹的則是用來(lái)解決這類(lèi)問(wèn)題的。實(shí)現(xiàn)模塊實(shí)現(xiàn)思路將配置內(nèi)的命令的的內(nèi)聯(lián)從前至后組成一個(gè)數(shù)組。所有字符串內(nèi)部又可以截取，獲取完整的。分析并解析該數(shù)組內(nèi)的字符串，獲取各個(gè)的絕對(duì)路徑。

前言

在webpack特性里面，它可以支持將非javaScript文件打包,但前面寫(xiě)到webpack的模塊化打包只能應(yīng)用于含有特定規(guī)范的JavaScript文件。本次介紹的loader則是用來(lái)解決這類(lèi)問(wèn)題的。本文章loader的實(shí)現(xiàn)基于code-splitting

功能分析

舉個(gè)例子：

webpack.config.js中的配置loader

    module: {
            rules: [
                {
                    test: /.js$/,
                    loader: "test-loader!test-loader2"
                }
            ]
        }

業(yè)務(wù)代碼中的內(nèi)聯(lián)loader

require("d!c");

分析：

我們需要將這些loader解析成可運(yùn)行的函數(shù),并在parse模塊解析語(yǔ)法樹(shù)之前運(yùn)行掉這些loader函數(shù)

所以我們需要:

resolve模塊:分析出module對(duì)應(yīng)的loader字符串,并解析出各個(gè)loader的絕對(duì)路徑

buildDeps模塊:通過(guò)文件路徑獲取需要運(yùn)行的loader函數(shù),將其壓入隊(duì)列，之后再依次按序遞歸出loader函數(shù)運(yùn)行,如果是異步loader,則要通過(guò)回調(diào)函數(shù)來(lái)遞歸下一個(gè)loader函數(shù)。

實(shí)現(xiàn) resolve 模塊

實(shí)現(xiàn)思路:

將配置內(nèi)的loaders,shell命令的loaders,require/import的內(nèi)聯(lián)loader從前至后組成一個(gè)數(shù)組。配置內(nèi)的loaders需要正則匹配test屬性，來(lái)獲取配置內(nèi)的loader字符串。所有l(wèi)oader字符串內(nèi)部又可以截取"!"，獲取完整的loader。

分析并解析該數(shù)組內(nèi)的字符串，獲取各個(gè)loader的絕對(duì)路徑。并返回解析好的字符串。這塊的實(shí)現(xiàn)和文件打包類(lèi)似。

最終require內(nèi)的字符串如下

/Users/zhujian/Documents/workspace/webpack/simple-webpack/example/node_modules/d.js!
/Users/zhujian/Documents/workspace/webpack/simple-webpack/example/node_modules/test-loader/index.js!
/Users/zhujian/Documents/workspace/webpack/simple-webpack/example/node_modules/test-loader2/index.js!
/Users/zhujian/Documents/workspace/webpack/simple-webpack/example/node_modules/c.js
buildDeps模塊

實(shí)現(xiàn)思路:

解析文件路徑,并獲取需要運(yùn)行的loader函數(shù),存入數(shù)組

數(shù)組在通過(guò)pop函數(shù)一個(gè)個(gè)遞歸,考慮到存在異步loader函數(shù)的情況,需要為運(yùn)行函數(shù)提供async,以及callback的上下文。具體的上下文可參考Loader API

loader遞歸邏輯如下:

    nextLoader.apply(null, content);
    function nextLoader() {
        const args = Array.prototype.slice.apply(arguments);
        if (loaderFunctions.length > 0) {
            const loaderFunction = loaderFunctions.pop();
            let async = false;
            const context = {
                fileName,
                options,
                debug: options.debug,
                async: function () {
                    async = true;
                    return nextLoader;
                },
                callback: function () {
                    async = true;
                    nextLoader.apply(null, arguments)
                }
            };
            const resVal = loaderFunction.apply(context, args);
            if (!async) {
                nextLoader(resVal);
            }
        } else {
            callback(null, args[0])
        }
    }
測(cè)試

將以上3個(gè)loader,test-loader,test-loader2,異步loader d.js,打包c(diǎn).js

test-loader

module.exports = function(content) {
    return content+"
exports.answer = 42;
"
}

test-loader2

module.exports = function(content) {
    return content+"
exports.test2 = test2;
"
}

異步loader d.js

module.exports = function (content) {
    const d = "d";
    this.async();
    const b = content + "
exports.d = 2000;
";
    setTimeout(this.callback.bind(this, b), 2000);
}

c.js

const c = "c";

module.exports = c;

最終打包出來(lái)的c.js的代碼如下

....
/* 1 */
/***/(function(module, exports,__webpack_require__) {
const c = "c";

module.exports = c;

exports.test2 = test2;

exports.answer = 42;

exports.d = 2000;

/***/}
....
代碼實(shí)現(xiàn)

本人的簡(jiǎn)易版webpack實(shí)現(xiàn)simple-webpack

(完)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/108049.html

相關(guān)文章

  • vue-loader 源碼解析系列之 整體分析

    摘要：筆者系貢獻(xiàn)者之一官方說(shuō)明簡(jiǎn)單來(lái)說(shuō)就是將文件變成，然后放入瀏覽器運(yùn)行。部分首先分析部分從做右到左，也就是被先后被和處理過(guò)了。源碼解析之二源碼解析之三寫(xiě)作中源碼解析之四寫(xiě)作中作者博客作者微博 筆者系 vue-loader 貢獻(xiàn)者（#16）之一 官方說(shuō)明 vue-loader is a loader for Webpack that can transform Vue components ...

    icattlecoder 評(píng)論0 收藏0

  • vue-loader 源碼解析系列之 selector

    摘要：當(dāng)前正在處理的節(jié)點(diǎn)，以及該節(jié)點(diǎn)的和等信息。源碼解析之一整體分析源碼解析之三寫(xiě)作中源碼解析之四寫(xiě)作中作者博客作者作者微博 筆者系 vue-loader 貢獻(xiàn)者之一（#16） 前言 vue-loader 源碼解析系列之一，閱讀該文章之前，請(qǐng)大家首先參考大綱 vue-loader 源碼解析系列之 整體分析 selector 做了什么 const path = require(path) co...

    miqt 評(píng)論0 收藏0

  • webpack源碼分析之四：plugin

    摘要：流程劃分縱觀整個(gè)打包過(guò)程，可以流程劃分為四塊。核心類(lèi)關(guān)系圖功能實(shí)現(xiàn)模塊通過(guò)將源碼解析為樹(shù)并拆分，以及直至基礎(chǔ)模塊。通過(guò)的依賴(lài)和切割文件構(gòu)建出含有和包含關(guān)系的對(duì)象。通過(guò)模版完成主入口文件的寫(xiě)入，模版完成切割文件的寫(xiě)入。 前言 插件plugin,webpack重要的組成部分。它以事件流的方式讓用戶可以直接接觸到webpack的整個(gè)編譯過(guò)程。plugin在編譯的關(guān)鍵地方觸發(fā)對(duì)應(yīng)的事件，極大的...

    yhaolpz 評(píng)論0 收藏0

  • webpack源碼之運(yùn)行流程

    摘要：引言通過(guò)前面幾張的鋪墊下面開(kāi)始分析源碼核心流程大體上可以分為初始化編譯輸出三個(gè)階段下面開(kāi)始分析初始化這個(gè)階段整體流程做了什么啟動(dòng)構(gòu)建，讀取與合并配置參數(shù)，加載，實(shí)例化。推薦源碼之源碼之機(jī)制源碼之簡(jiǎn)介源碼之機(jī)制參考源碼 引言 通過(guò)前面幾張的鋪墊,下面開(kāi)始分析webpack源碼核心流程,大體上可以分為初始化,編譯,輸出三個(gè)階段,下面開(kāi)始分析 初始化 這個(gè)階段整體流程做了什么? 啟動(dòng)構(gòu)建，讀...

    kviccn 評(píng)論0 收藏0

  • FE.SRC-webpack原理梳理

    摘要：執(zhí)行完成后會(huì)返回如下圖的結(jié)果，根據(jù)返回?cái)?shù)據(jù)把源碼和存儲(chǔ)在的屬性上的回調(diào)函數(shù)中調(diào)用類(lèi)生成，并根據(jù)生成依賴(lài)后回調(diào)方法返回類(lèi)。 webpack設(shè)計(jì)模式 一切資源皆Module Module(模塊)是webpack的中的關(guān)鍵實(shí)體。Webpack 會(huì)從配置的 Entry 開(kāi)始遞歸找出所有依賴(lài)的模塊. 通過(guò)Loaders(模塊轉(zhuǎn)換器)，用于把模塊原內(nèi)容按照需求轉(zhuǎn)換成新模塊內(nèi)容. 事件驅(qū)動(dòng)架構(gòu) we...

    cfanr 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<