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

資訊專(zhuān)欄INFORMATION COLUMN

淺析webpack源碼之NodeEnvironmentPlugin模塊總覽（六）

ChristmasBoy / 3177人閱讀

摘要：進(jìn)入傳入地址出來(lái)一個(gè)復(fù)雜對(duì)象把掛載到對(duì)象上太復(fù)雜我們先看可以緩存輸入的文件系統(tǒng)輸入文件系統(tǒng)輸出文件系統(tǒng)，掛載到對(duì)象傳入輸入文件，監(jiān)視文件系統(tǒng)，掛載到對(duì)象添加事件流打開(kāi)插件讀取目錄下文件對(duì)文件名進(jìn)行格式化異步讀取目錄下文件同步方法就

進(jìn)入webpack.js

//傳入地址,new Compiler出來(lái)一個(gè)復(fù)雜對(duì)象
compiler = new Compiler(options.context);
// 把options掛載到對(duì)象上
compiler.options = options;
new NodeEnvironmentPlugin().apply(compiler);

compiler太復(fù)雜

我們先看NodeEnvironmentPlugin

const NodeWatchFileSystem = require("./NodeWatchFileSystem");
const NodeOutputFileSystem = require("./NodeOutputFileSystem");
const NodeJsInputFileSystem = require("enhanced-resolve/lib/NodeJsInputFileSystem");
const CachedInputFileSystem = require("enhanced-resolve/lib/CachedInputFileSystem");

class NodeEnvironmentPlugin {
    apply(compiler) {
        // 可以緩存輸入的文件系統(tǒng)
        compiler.inputFileSystem = new CachedInputFileSystem(
            new NodeJsInputFileSystem(),
            60000
        );
        // 輸入文件系統(tǒng)
        const inputFileSystem = compiler.inputFileSystem;
        // 輸出文件系統(tǒng)，掛載到compiler對(duì)象
        compiler.outputFileSystem = new NodeOutputFileSystem();
        // 傳入輸入文件，監(jiān)視文件系統(tǒng)，掛載到compiler對(duì)象
        compiler.watchFileSystem = new NodeWatchFileSystem(
            compiler.inputFileSystem
        );
        // 添加事件流before-run
        compiler.hooks.beforeRun.tap("NodeEnvironmentPlugin", compiler => {
            if (compiler.inputFileSystem === inputFileSystem) inputFileSystem.purge();
        });
    }
}
module.exports = NodeEnvironmentPlugin;

打開(kāi)插件NodeJsInputFileSystem.js

"use strict";

const fs = require("graceful-fs");

class NodeJsInputFileSystem {
     //讀取目錄下文件
    readdir(path, callback) {
        fs.readdir(path, (err, files) => {
            callback(err, files && files.map(file => {
              // 對(duì)文件名進(jìn)行NFC格式化
                return file.normalize ? file.normalize("NFC") : file;
            }));
        });
    }
     //異步讀取目錄下文件
    readdirSync(path) {
        const files = fs.readdirSync(path);
        return files && files.map(file => {
            return file.normalize ? file.normalize("NFC") : file;
        });
    }
}

const fsMethods = [
    "stat",
    "statSync",
    "readFile",
    "readFileSync",
    "readlink",
    "readlinkSync"
];
// 同步fs方法
for(const key of fsMethods) {
    Object.defineProperty(NodeJsInputFileSystem.prototype, key, {
        configurable: true,
        writable: true,
        value: fs[key].bind(fs)
    });
}

module.exports = NodeJsInputFileSystem;

graceful-fs就是對(duì)node 原生fs 做了一層封裝，顯得更優(yōu)雅

總體看來(lái)NodeEnvironmentPlugin這個(gè)模塊就是對(duì)文件做了處理，又重新封裝了node.js 對(duì)fs模塊做了以一些處理，文件的輸入，輸出，緩存，監(jiān)聽(tīng)...

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

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

相關(guān)文章

  • 淺析webpack源碼之Compiler.js模塊(八)

    摘要：小尾巴最終返回了屬性?huà)燧d把引入的函數(shù)模塊全部暴露出來(lái)下面暴露了一些插件再通俗一點(diǎn)的解釋比如當(dāng)你你能調(diào)用文件下的方法這個(gè)和上面的不同在于上面的是掛在函數(shù)對(duì)象上的正題要想理解必須要理解再寫(xiě)一遍地址我們先簡(jiǎn)單的理解它為一個(gè)通過(guò)注冊(cè)插件是插件的事 webpack.js小尾巴 const webpack = (options, callback) => { //... if (...

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

  • 淺析webpack源碼之入口函數(shù)webpack.js詳解（四）

    摘要：我們看到引入了對(duì)進(jìn)行分析是一個(gè)很大的文件，里面規(guī)定了我們隨便看一段這是對(duì)你輸入的規(guī)定的要求是是其實(shí)就是本下的這樣寫(xiě)可以提取公用的配置，避免代碼冗余一共行，其中就占了行接下里進(jìn)入函數(shù)引入引入了，我們?cè)谒阉麈溄游覀兛吹?，在文檔里這樣的描述的用法 我們看到引入了 對(duì)webpack.js const validateSchema = require(./validateSchema); con...

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

  • 淺析webpack源碼之WebpackOptionsApply 模塊(七)

    摘要：還做了處理，是之所以能根據(jù)變化自己更新的核心，好凌亂，我們先從那個(gè)坑跳出來(lái)進(jìn)入這個(gè)大坑進(jìn)入這個(gè)頁(yè)面看到前面一大堆的模塊引入，已經(jīng)給跪了，但是馬馬虎虎的完成也比放棄好前面一大堆的引入，主要是下和文件夾下的模塊父類(lèi)就只是定義了接口主要核心在方法 NodeEnvironmentPlugin還做了watch處理，NodeWatchFileSystem是webpack之所以能根據(jù)變化自己更新的核...

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

  • 淺析webpack源碼之CachedInputFileSystem模塊(六(1))

    摘要：原本寫(xiě)的誤操作被吞了，下面是代碼記錄這個(gè)模塊主要做了緩存文件操作生成緩存容器目前他們是一樣樣的都是，區(qū)別在于調(diào)用方法傳遞參數(shù)不一樣，分別儲(chǔ)存不一個(gè)類(lèi)型的緩存把文件信息賦值給對(duì)應(yīng)屬性自定義讀取讀取文件調(diào)用對(duì)象方法分別清除對(duì)應(yīng)的，是傳入什么， 原本寫(xiě)的誤操作被吞了，下面是代碼記錄這個(gè)模塊主要做了緩存文件操作 module.exports = class CachedInputFileSys...

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

  • 淺析webpack源碼之convert-argv模塊（二）

    摘要：接下來(lái)我看看一下函數(shù)我們先按照分支走為讀取是里的對(duì)象，饒了這大的一個(gè)圈子，那么接下來(lái)一起來(lái)看一看對(duì)你的輸入配置做了怎么樣的處理吧 打開(kāi)webpeck-cli下的convert-argv.js文件 // 定義options為空數(shù)組 const options = []; // webpack -d 檢查 -d指令 if (argv.d) { //... } ...

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

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

0條評(píng)論

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