介紹Compiler的構(gòu)造比較無(wú)趣，不如先過(guò)后面的，在用到compiler的時(shí)候再做講解。

　　這一節(jié)主要講這行代碼：

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

　　這個(gè)構(gòu)造了一個(gè)NodeEnvironmentPlugin對(duì)象并調(diào)用apply對(duì)compiler進(jìn)行操作。

　　流程圖：

　　模塊源碼如下：

"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) {// 可以緩存輸入的文件系統(tǒng)compiler.inputFileSystem = new CachedInputFileSystem(new NodeJsInputFileSystem(), 60000);const inputFileSystem = compiler.inputFileSystem;// 輸出文件系統(tǒng)compiler.outputFileSystem = new NodeOutputFileSystem();// 監(jiān)視文件系統(tǒng)compiler.watchFileSystem = new NodeWatchFileSystem(compiler.inputFileSystem);// 添加事件流before-runcompiler.plugin("before-run", (compiler, callback) => {if (compiler.inputFileSystem === inputFileSystem)inputFileSystem.purge();callback();});} } module.exports = NodeEnvironmentPlugin;

　　除去添加事件流，其余幾步都是在compiler對(duì)象上掛載node的fs文件系統(tǒng)，詳細(xì)的API用法可以去nodejs官網(wǎng)看文檔：https://nodejs.org/dist/latest-v8.x/docs/api/

　　這里只做簡(jiǎn)介：

NodeJsInputFileSystem

var fs = require("graceful-fs");module.exports = NodeJsInputFileSystem; // 獲取文件信息 NodeJsInputFileSystem.prototype.stat = fs.stat.bind(fs); // 讀取目錄內(nèi)容 NodeJsInputFileSystem.prototype.readdir = function readdir(path, callback) {// files 是目錄中不包括 '.' 和 '..' 的文件名的數(shù)組fs.readdir(path, function(err, files) {callback(err, files && files.map(function(file) {// 對(duì)文件名進(jìn)行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);

　　可以看到，這里只是對(duì)引入的graceful-js的部分方法進(jìn)行bind綁定，大概看一下graceful-fs的內(nèi)容：

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 }

　　跟名字一樣，內(nèi)部調(diào)用了一個(gè)patch對(duì)fs模塊進(jìn)行二次封裝，變得更加'優(yōu)雅'。

?

NodeOutputFileSystem

"use strict";const fs = require("fs"); const path = require("path"); const mkdirp = require("mkdirp");class NodeOutputFileSystem {constructor() {// 新建多層級(jí)文件夾this.mkdirp = mkdirp;// 新建單個(gè)文件夾this.mkdir = fs.mkdir.bind(fs);// 刪除文件夾this.rmdir = fs.rmdir.bind(fs);// 刪除文件this.unlink = fs.unlink.bind(fs);// 將內(nèi)容寫(xiě)進(jìn)某個(gè)文件this.writeFile = fs.writeFile.bind(fs);// 略this.join = path.join.bind(path);} }module.exports = NodeOutputFileSystem;

　　這個(gè)模塊就十分親民，都是原生的nodeAPI，并沒(méi)有進(jìn)行包裝。

?

NodeWatchFileSystem "use strict";const Watchpack = require("watchpack");class NodeWatchFileSystem {constructor(inputFileSystem) {this.inputFileSystem = inputFileSystem;this.watcherOptions = {aggregateTimeout: 0};this.watcher = new Watchpack(this.watcherOptions);}// 對(duì)文件進(jìn)行監(jiān)視watch(files, dirs, missing, startTime, options, callback, callbackUndelayed) { /*...*/ } }module.exports = NodeWatchFileSystem;

　　模塊內(nèi)容比較簡(jiǎn)單，引入一個(gè)inputFileSystem進(jìn)行初始化監(jiān)視對(duì)象，原型上只有一個(gè)watch方法。(實(shí)際內(nèi)容非常深入和繁雜，后面再講)

　　

　　這個(gè)模塊主要是為了接下來(lái)輸出打包文件做準(zhǔn)備，主要內(nèi)容大部分是nodejs相關(guān)。

　　不過(guò)沒(méi)關(guān)系，都是用JS寫(xiě)的。

轉(zhuǎn)載于:https://www.cnblogs.com/QH-Jimmy/p/8041875.html

總結(jié)

以上是生活随笔為你收集整理的.9-浅析webpack源码之NodeEnvironmentPlugin模块总览的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。