浅析webpack源码之NodeEnvironmentPlugin模块总览（六）

ChristmasBoy 发布于2019-08-23 14:49 / 3151人阅读

摘要：进入传入地址出来一个复杂对象把挂载到对象上太复杂我们先看可以缓存输入的文件系统输入文件系统输出文件系统，挂载到对象传入输入文件，监视文件系统，挂载到对象添加事件流打开插件读取目录下文件对文件名进行格式化异步读取目录下文件同步方法就

进入webpack.js

//传入地址,new Compiler出来一个复杂对象
compiler = new Compiler(options.context);
// 把options挂载到对象上
compiler.options = options;
new NodeEnvironmentPlugin().apply(compiler);

compiler太复杂

我们先看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) {
        // 可以缓存输入的文件系统
        compiler.inputFileSystem = new CachedInputFileSystem(
            new NodeJsInputFileSystem(),
            60000
        );
        // 输入文件系统
        const inputFileSystem = compiler.inputFileSystem;
        // 输出文件系统，挂载到compiler对象
        compiler.outputFileSystem = new NodeOutputFileSystem();
        // 传入输入文件，监视文件系统，挂载到compiler对象
        compiler.watchFileSystem = new NodeWatchFileSystem(
            compiler.inputFileSystem
        );
        // 添加事件流before-run
        compiler.hooks.beforeRun.tap("NodeEnvironmentPlugin", compiler => {
            if (compiler.inputFileSystem === inputFileSystem) inputFileSystem.purge();
        });
    }
}
module.exports = NodeEnvironmentPlugin;

打开插件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 => {
              // 对文件名进行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就是对node 原生fs 做了一层封装，显得更优雅

总体看来NodeEnvironmentPlugin这个模块就是对文件做了处理，又重新封装了node.js 对fs模块做了以一些处理，文件的输入，输出，缓存，监听...

云服务器 GPU云服务器源码浅析源码中文说明之源码编译模块一键总览

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101201.html

浅析webpack源码之Compiler.js模块(八)

摘要：小尾巴最终返回了属性挂载把引入的函数模块全部暴露出来下面暴露了一些插件再通俗一点的解释比如当你你能调用文件下的方法这个和上面的不同在于上面的是挂在函数对象上的正题要想理解必须要理解再写一遍地址我们先简单的理解它为一个通过注册插件是插件的事 webpack.js小尾巴 const webpack = (options, callback) => { //... if (...

PumpkinDylan 2019-08-23 14:50 评论0 收藏0
浅析webpack源码之入口函数webpack.js详解（四）

摘要：我们看到引入了对进行分析是一个很大的文件，里面规定了我们随便看一段这是对你输入的规定的要求是是其实就是本下的这样写可以提取公用的配置，避免代码冗余一共行，其中就占了行接下里进入函数引入引入了，我们在搜索链接我们看到，在文档里这样的描述的用法我们看到引入了对webpack.js const validateSchema = require(./validateSchema); con...

zone 2019-08-23 14:45 评论0 收藏0
浅析webpack源码之WebpackOptionsApply 模块(七)

摘要：还做了处理，是之所以能根据变化自己更新的核心，好凌乱，我们先从那个坑跳出来进入这个大坑进入这个页面看到前面一大堆的模块引入，已经给跪了，但是马马虎虎的完成也比放弃好前面一大堆的引入，主要是下和文件夹下的模块父类就只是定义了接口主要核心在方法 NodeEnvironmentPlugin还做了watch处理，NodeWatchFileSystem是webpack之所以能根据变化自己更新的核...

AaronYuan 2019-08-23 14:49 评论0 收藏0
浅析webpack源码之CachedInputFileSystem模块(六(1))

摘要：原本写的误操作被吞了，下面是代码记录这个模块主要做了缓存文件操作生成缓存容器目前他们是一样样的都是，区别在于调用方法传递参数不一样，分别储存不一个类型的缓存把文件信息赋值给对应属性自定义读取读取文件调用对象方法分别清除对应的，是传入什么，原本写的误操作被吞了，下面是代码记录这个模块主要做了缓存文件操作 module.exports = class CachedInputFileSys...

Channe 2019-08-23 14:49 评论0 收藏0
浅析webpack源码之convert-argv模块（二）

摘要：接下来我看看一下函数我们先按照分支走为读取是里的对象，饶了这大的一个圈子，那么接下来一起来看一看对你的输入配置做了怎么样的处理吧打开webpeck-cli下的convert-argv.js文件 // 定义options为空数组 const options = []; // webpack -d 检查 -d指令 if (argv.d) { //... } ...

lemon 2019-08-23 14:38 评论0 收藏0