介绍Compiler的构造比较无趣,不如先过后面的,在用到compiler的时候再做讲解。

  这一节主要讲这行代码:

// 不管这里
compiler = new Compiler();
compiler.context = options.context;
compiler.options = options;
// 看这里
new NodeEnvironmentPlugin().apply(compiler);

  这个构造了一个NodeEnvironmentPlugin对象并调用apply对compiler进行操作。

  流程图:

  模块源码如下:

"use strict";

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.outputFileSystem = new NodeOutputFileSystem();
// 监视文件系统
compiler.watchFileSystem = new NodeWatchFileSystem(compiler.inputFileSystem);
// 添加事件流before-run
compiler.plugin("before-run", (compiler, callback) => {
if (compiler.inputFileSystem === inputFileSystem)
inputFileSystem.purge();
callback();
});
}
}
module.exports = NodeEnvironmentPlugin;

  除去添加事件流,其余几步都是在compiler对象上挂载node的fs文件系统,详细的API用法可以去nodejs官网看文档:https://nodejs.org/dist/latest-v8.x/docs/api/

  这里只做简介:

NodeJsInputFileSystem

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

module.exports = NodeJsInputFileSystem;
// 获取文件信息
NodeJsInputFileSystem.prototype.stat = fs.stat.bind(fs);
// 读取目录内容
NodeJsInputFileSystem.prototype.readdir = function readdir(path, callback) {
// files 是目录中不包括 '.' 和 '..' 的文件名的数组
fs.readdir(path, function(err, files) {
callback(err, files && files.map(function(file) {
// 对文件名进行NFC格式化
return file.normalize ? file.normalize("NFC") : file;
}));
});
};
// 读取文件
NodeJsInputFileSystem.prototype.readFile = fs.readFile.bind(fs);
// 读取链接
NodeJsInputFileSystem.prototype.readlink = fs.readlink.bind(fs);
// 同步方法
NodeJsInputFileSystem.prototype.statSync = fs.statSync.bind(fs);
NodeJsInputFileSystem.prototype.readdirSync = function readdirSync(path) {/**/};
NodeJsInputFileSystem.prototype.readFileSync = fs.readFileSync.bind(fs);
NodeJsInputFileSystem.prototype.readlinkSync = fs.readlinkSync.bind(fs);

  可以看到,这里只是对引入的graceful-js的部分方法进行bind绑定,大概看一下graceful-fs的内容:

var fs = require('fs')

// ...工具方法

module.exports = patch(require('./fs.js'))
if (process.env.TEST_GRACEFUL_FS_GLOBAL_PATCH) {
module.exports = patch(fs)
} module.exports.close = fs.close = (function(fs$close) { /*...*/ })(fs.close) module.exports.closeSync = fs.closeSync = (function(fs$closeSync) { /*...*/ })(fs.closeSync) function patch(fs) {
// fs方法二次封装
return fs
}

  跟名字一样,内部调用了一个patch对fs模块进行二次封装,变得更加'优雅'。

NodeOutputFileSystem

"use strict";

const fs = require("fs");
const path = require("path");
const mkdirp = require("mkdirp"); class NodeOutputFileSystem {
constructor() {
// 新建多层级文件夹
this.mkdirp = mkdirp;
// 新建单个文件夹
this.mkdir = fs.mkdir.bind(fs);
// 删除文件夹
this.rmdir = fs.rmdir.bind(fs);
// 删除文件
this.unlink = fs.unlink.bind(fs);
// 将内容写进某个文件
this.writeFile = fs.writeFile.bind(fs);
// 略
this.join = path.join.bind(path);
}
} module.exports = NodeOutputFileSystem;

  这个模块就十分亲民,都是原生的nodeAPI,并没有进行包装。

NodeWatchFileSystem

"use strict";

const Watchpack = require("watchpack");

class NodeWatchFileSystem {
constructor(inputFileSystem) {
this.inputFileSystem = inputFileSystem;
this.watcherOptions = {
aggregateTimeout: 0
};
this.watcher = new Watchpack(this.watcherOptions);
}
// 对文件进行监视
watch(files, dirs, missing, startTime, options, callback, callbackUndelayed) { /*...*/ }
} module.exports = NodeWatchFileSystem;

  模块内容比较简单,引入一个inputFileSystem进行初始化监视对象,原型上只有一个watch方法。(实际内容非常深入和繁杂,后面再讲)

  

  这个模块主要是为了接下来输出打包文件做准备,主要内容大部分是nodejs相关。

  不过没关系,都是用JS写的。

.9-浅析webpack源码之NodeEnvironmentPlugin模块总览的更多相关文章

  1. .12-浅析webpack源码之NodeWatchFileSystem模块总览

    剩下一个watch模块,这个模块比较深,先大概过一下整体涉及内容再分部讲解. 流程图如下: NodeWatchFileSystem const Watchpack = require("wa ...

  2. .3-浅析webpack源码之预编译总览

    写在前面: 本来一开始想沿用之前vue源码的标题:webpack源码之***,但是这个工具比较巨大,所以为防止有人觉得我装逼跑来喷我(或者随时鸽),加上浅析二字,以示怂. 既然是浅析,那么案例就不必太 ...

  3. .6-浅析webpack源码之validateSchema模块

    validateSchema模块 首先来看错误检测: const webpackOptionsValidationErrors = validateSchema(webpackOptionsSchem ...

  4. .4-浅析webpack源码之convert-argv模块

    上一节看了一眼预编译的总体代码,这一节分析convert-argv模块. 这个模块主要是对命令参数的解析,也是yargs框架的核心用处. 生成默认配置文件名数组 module.exports = fu ...

  5. .15-浅析webpack源码之WebpackOptionsApply模块-plugin事件流总览

    总体过了一下后面的流程,发现Compiler模块确实不适合单独讲解,这里继续讲解后面的代码: compiler.options = new WebpackOptionsApply().process( ...

  6. .14-浅析webpack源码之Watchpack模块

    解决掉了最头疼的DirectoryWatcher内部实现,这一节可以结束NodeWatchFileSystem模块. 关于watch的应用场景,仔细思考了下,这不就是热重载的核心嘛. 首先是监视文件, ...

  7. .13-浅析webpack源码之WatcherManager模块

    从模块流可以看出,这个NodeWatchFileSystem模块非常深,这里暂时不会深入到chokidar模块,有点太偏离本系列文章了,从WatcherManager开始讲解. 流程如图: 源码非常简 ...

  8. .11-浅析webpack源码之Storage模块

    至此已完成NodeJsInputFileSysten模块的讲解,下一步就是实际实用的模块: compiler.inputFileSystem = new CachedInputFileSystem(n ...

  9. .10-浅析webpack源码之graceful-fs模块

    在cachedInput.output.watch三大文件系统中,output非常简单,没有必要讲,其余两个模块依赖于input模块,而input主要是引用了graceful-fs的部分API,所以这 ...

随机推荐

  1. Element ui表格展示图片问题

    当需要遍历图片时,不能直接使用prop绑定值,具体 代码如下 <el-table-column label="头像" width="100"> &l ...

  2. 在centos上安装jenkins

    摘要: 本篇介绍了如何在linux服务器上安装jenkins 一:使用war安装 官网地址:https://jenkins.io/doc/ Guided Tour This guided tour w ...

  3. 2.安装Nginx

    安装稳定版本的nginx 1.为CentOS系统安装yum仓库,创建文件 /etc/yum.repos.d/nginx.repo [nginx] name=nginx repo baseurl=htt ...

  4. 蓝桥杯-算法训练--ALGO-5 最短路

    问题描述 给定一个n个顶点,m条边的有向图(其中某些边权可能为负,但保证没有负环).请你计算从1号点到其他点的最短路(顶点从1到n编号). 输入格式 第一行两个整数n, m. 接下来的m行,每行有三个 ...

  5. Python爬虫入门:Urllib库的基本使用

    1.分分钟扒一个网页下来 怎样扒网页呢?其实就是根据URL来获取它的网页信息,虽然我们在浏览器中看到的是一幅幅优美的画面,但是其实是由浏览器解释才呈现出来的,实质它 是一段HTML代码,加 JS.CS ...

  6. windows下 sbulime text 安装less2css踩的几个坑

    sublime 就不介绍了,less2css 是一个安装在sublime上的插件,可以让你书写less后自动生成css文件,而且还可以提示less的语法错误. 搜了一下相关的教程,很多都写的不全,按照 ...

  7. Asp.Net Core API网关Ocelot

    首先,让我们简单了解下什么是API网关? API网关是一个服务器,是系统的唯一入口.从面向对象设计的角度看,它与外观模式类似.API网关封装了系统内部架构,为每个客户端提供一个定制的API.它可能还具 ...

  8. sublime text3添加右键打开的操作

    前一段重新安装了Sublime Text3,不过一直不在右键菜单中,所以决定添加,有如下2种方法. 方法一(推荐). 把以下代码,复制到SublimeText3的安装目录,然后重命名为:sublime ...

  9. 使用MS Test做单元测试

    声明:本篇博客翻译自:http://www.c-sharpcorner.com/article/unit-testing-with-ms-tests-in-c-sharp/ 写在翻译之前: 依然清晰的 ...

  10. python基础-------模块与包(四)

    configparser模块与 subprcess 利用configparser模块配置一个类似于 windows.ini格式的文件可以包含一个或多个节(section),每个节可以有多个参数(键=值 ...