likes
comments
collection
share

从构建产物洞悉模块化原理

作者站长头像
站长
· 阅读数 37

一、前言

该文是 从零到亿系统性的建立前端构建知识体系✨ 中的第一篇，整体难度 ⭐️⭐️。

本文将从前端模块化的发展历史出发，逐步探讨CommonJS规范 和 ES Module规范之间的异同，最后将深入模块化内部原理进行多维度剖析，彻底弄懂 Web环境下 Webpack 是如何支持这些模块化规范的，整体深度阅读时间约15分钟。

在正式开始之前我们先看看几个常见的相关面试题：

  • 模块化的产生是为了解决什么问题？在什么场景下诞生的？
  • Web环境中是如何支持模块化的？加载过程是怎么样的？
  • CommonJS 可以加载 ES Module 导出的内容吗？
  • ES Module 可以加载 CommonJS 导出的内容吗？
  • Webpack 内部是如何区分一个模块是采用的哪种模块化规范？
  • 一个模块内可以既使用CommonJS，又使用 ES Module 吗？
  • ......

相信读完本文，你对上面的一系列问题都能够轻松的解答。

另外，文章总结栏中附有一道代码执行题，用来检测自己是否完全吸收，别忘记做了哦。

二、前置知识

在正式内容开始之前，先来学一个预备小知识点，以免影响后面的学习。

我们有时会使用 Object.prototype.toString 这个方法来判断数据的类型，比如：

Object.prototype.toString.call('hello');     // "[object String]"
Object.prototype.toString.call([1, 2]);    // "[object Array]"
Object.prototype.toString.call(3);         // "[object Number]"
Object.prototype.toString.call(true);      // "[object Boolean]"
Object.prototype.toString.call(undefined); // "[object Undefined]"
Object.prototype.toString.call(null);      // "[object Null]"
// ... and more

那我们如果想自定义数据的类型标签怎么办？就像这样：

Object.prototype.toString.call(new Map());       // "[object Map]"
Object.prototype.toString.call(function* () {}); // "[object GeneratorFunction]"
Object.prototype.toString.call(Promise.resolve()); // "[object Promise]"
// ... and more

这里 toString() 方法能识别 Map、GeneratorFunction、Promise这些类型是因为浏览器引擎为它们设置好了 toStringTag 标签，那我们该如何设置自己想要的类型标签呢？

引自官方介绍：Symbol.toStringTag 是一个内置 symbol，它通常作为对象的属性键使用，对应的属性值应该为字符串类型，这个字符串用来表示该对象的自定义类型标签，通常只有内置的 Object.prototype.toString() 方法会去读取这个标签并把它包含在自己的返回值里。

我们来试一试：通过 Object.defineProperty 在对象上定义 toStringTag 属性：

const obj = {};

//定义属性
Object.defineProperty(obj, Symbol.toStringTag, { value: "Module" });

//查看自定义类型
console.log(Object.prototype.toString.call(obj)) //'[object Module]'改变了类型为Module

得到结果为[object Module]，拿到了我们想要的类型。

三、模块化发展历史

早期 JavaScript 开发很容易存在全局污染和依赖管理混乱问题，这些问题在多人开发前端应用的情况下变得更加棘手。我这里例举一个很常见的场景：

<body>
  <script src="./index.js"></script>
  <script src="./home.js"></script>
  <script src="./list.js"></script>
</body>

没有模块化，那么 script 内部的变量是可以相互污染的。比如有一种场景，如上 ./index.js 文件和 ./list.js 文件为小 A 开发的，./home.js 为小 B 开发的。

小 A 在 index.js中声明 name 属性是一个字符串。

var name = '不要秃头啊'

然后小 A 在 list.js 中，引用 name 属性，

console.log(name)

从构建产物洞悉模块化原理

打印却发现 name 竟然变成了一个函数。刚开始小 A 不知所措，后来发现在小 B 开发的 home.js 文件中这么写道：

function name(){
    //...
}

......

上述例子就是没有使用模块化开发，造成的全局污染的问题，每个加载的js文件都共享变量。

当然，在实际的项目开发中，可以使用匿名函数自执行的方式，形成独立的块级作用域解决这个问题。

只需要在 home.js 中这么写道：

(function (){
    function name(){
        //...
    }
})()

这样小 A 就能正常在 list.js 中获取 name 属性。

但是，这又带来了新的问题：

  • 我必须记得每一个模块中返回对象的命名，才能在其他模块使用过程中正确的使用
  • 代码写起来杂乱无章，每个文件中的代码都需要包裹在一个匿名函数中来编写
  • 在没有合适的规范情况下，每个人、每个公司都可能会任意命名、甚至出现模块名称相同的情况

所以现在急需一个统一的规范，来解决这些缺陷问题，就此CommonJS规范问世了。

四、CommonJS规范

CommonJS 是一个规范，最初提出来是在浏览器以外的地方使用，并且当时被命名为ServerJS，后来为了体现它的广泛性，修改为CommonJS规范。Node 是 CommonJS在服务器端一个具有代表性的实现。

正是因为Node中对CommonJS进行了支持和实现，所以它具备以下几个特点：

  • 在Node中每一个js文件都是一个单独的模块
  • 该模块中，包含CommonJS规范的核心变量: exports、module.exports、require
  • 使用核心变量，进行模块化开发

使用：

//在a.js中导出变量
const name = "不要秃头啊";
const age = "18";
module.exports = { name, age };
//或者：
exports.name = "不要秃头啊";
exports.age = "18";

//在b.js中引用导出的变量
const { name, age } = require("./a.js");
console.log( name , age )

五、ES Module规范

Nodejs 借鉴了 Commonjs 实现了模块化 。从 ES6 开始， JavaScript 才真正意义上有自己的模块化规范。

Es Module 的产生有很多优势，比如:

  • 借助 Es Module 的静态导入导出的优势，实现了 tree shaking（后续文章会重点讲到）
  • Es Module 还可以 import() 懒加载方式实现代码分割（下篇文章会进行详情讲解）

在 Es Module 中用 export 用来导出模块，import 用来导入模块。

使用：

/**
 * 导出
 */
export * from 'module'; //重定向导出 不包括 module内的default
export { name1, name2, ..., nameN } from 'module'; // 重定向命名导出
export { import1 as name1, import2 as name2, ..., nameN } from 'module'; // 重定向重命名导出
export { name1, name2, …, nameN }; // 与之前声明的变量名绑定 命名导出
export { variable1 as name1, variable2 as name2, …, nameN }; // 重命名导出
export let name1 = 'name1'; // 声明命名导出 或者 var, const，function， function*, class
export default expression; // 默认导出
export default function () { ... } // 或者 function*, class
export default function name1() { ... } // 或者 function*, class

/**
 * 导入
 */
import defaultExport from "module"; // 默认导入
import { a, b, c } from "module"; //解构导入
import defaultExport, { a, b, c as newC } from "module"; //混合导入
import * as name from "module"; //混合导入
var promise = import("module"); //动态导入(异步导入)

六、在Webpack中的基本配置

在使用 Webpack 搭建的项目中，它是允许我们使用各种各样的模块化的。最常用的方式就是 CommonJS 和 ES Module。那么它内部是如何帮助我们实现了代码中支持模块化呢?

接下来将从这四个角度来研究一下它的原理：

  • CommonJS模块化实现原理
  • ES Module实现原理
  • CommonJS加载ES Module的原理
  • ES Module加载CommonJS的原理

为了防止我行你不行的场景发生，在这里统一配置：

 "webpack": "^5.73.0",
 "webpack-cli": "^4.10.0",

Webpack基本配置：webpack.config.js

module.exports = {
  mode: "development", //防止代码压缩
  entry: "./src/main.js",
  devtool: "source-map",//查看打包后的代码更方便
}

七、CommonJs模块化实现原理

name.js:

module.exports = "不要秃头啊";

main.js：

let author = require("./name.js");
console.log(author, "author");

在看具体打包代码之前，我们先来分析一下 👀。

在name.js中有一个 module 对象，module 对象上有一个 exports 属性，我们给 exports 属性进行了赋值："不要秃头啊"。

在main.js中，我们调用了 require 函数，入参为模块路径（./name.js），最后返回值为 module.exports 的内容。

如果让我们来设计一下这个运行过程，是不是这样就可以了：将name.js中的内容转换到一个modules对象中，该对象中key值为该模块路径，value值为该模块代码。在require函数执行时获取导出对象。

var modules = {
  "./name.js": () => {
    var module = {};
    module.exports = "不要秃头啊";
    return module.exports;
  },
};
const require = (modulePath) => {
  return modules[modulePath]();
};

let author = require("./name.js");
console.log(author, "author");

其实源码中的大致思路也是类似的，以上就是CommonJs能在浏览器中运行的核心思想。

接下来我们看看具体源码中的实现（对打包后的内容进行了调整优化，不影响阅读）。

主要分为以下几个部分：

  • 初始化：定义 modules 对象
  • 定义缓存对象cache
  • 定义加载模块函数require
  • 执行入口函数

初始化：定义 modules 对象

// 初始化：定义了一个对象modules， key为模块的路径 value是一个函数，函数里面是我们编写的源代码
var modules = {
  "./src/name.js": (module) => {
    module.exports = "不要秃头啊";
  },
};

定义缓存对象cache

var cache = {};

定义加载模块函数require

require：接受模块的路径为参数，返回具体的模块的内容。

//接受模块的路径为参数，返回具体的模块的内容
function require(modulePath) {
  var cachedModule = cache[modulePath]; //获取模块缓存
  if (cachedModule !== undefined) {
    //如果有缓存则不允许模块内容，直接retuen导出的值
    return cachedModule.exports;
  }
  //如果没有缓存，则定义module对象，定义exports属性
  //这里注意！！！module = cache[modulePath] 代表引用的是同一个内存地址
  var module = (cache[modulePath] = {
    exports: {},
  });
  //运行模块内的代码，在模块代码中会给module.exports对象赋值
  modules[modulePath](module, module.exports, require);

  //导入module.exports对象
  return module.exports;
}

执行入口函数

防止命名冲突，包装成一个立即执行函数。

(() => {
  let author = require("./src/name.js");
  console.log(author, "author");
})();

整体代码

如果不喜欢看代码的可以看图，重在理解思想即可。

从构建产物洞悉模块化原理

//模块定义
var modules = {
  "./src/name.js": (module) => {
    module.exports = "不要秃头啊";
  },
};
var cache = {};

//接受模块的路径为参数，返回具体的模块的内容
function require(modulePath) {
  var cachedModule = cache[modulePath]; //获取模块缓存
  if (cachedModule !== undefined) {
    //如果有缓存则不允许模块内容，直接retuen导出的值
    return cachedModule.exports;
  }
  //如果没有缓存，则定义module对象，定义exports属性
  //这里注意！！！module = cache[modulePath] 代表引用的是同一个内存地址
  var module = (cache[modulePath] = {
    exports: {},
  });
  //运行模块内的代码，在模块代码中会给module.exports对象赋值
  modules[modulePath](module, module.exports, require);

  //导入module.exports对象
  return module.exports;
}

(() => {
  let author = require("./src/name.js");
  console.log(author, "author");
})();

八、ES Module模块化原理

name.js:

const author = "不要秃头啊";

export const age = "18";
export default author;

main.js:

import author, { age } from "./name";

console.log(author, "author");
console.log(age, "age");

我们还是先来理一理思路。

这下可没有exports对象给我们赋值了，这可怎么办？

换一种思路：我们可不可以将 name.js 中导出的内容还是挂载在 exports 对象上，如果是通过export default 方式导出的，那就在 exports 对象加一个 default 属性，将 name.js 中导出的内容变成这样：

const exports = {
  age: "18",
  default: "不要秃头啊",
}

然后在模块引用时（在 Webpack 编译时会将 import author from "./name" 代码块转换成 const exports = require(./name) 代码块），这样在 main.js 中拿到的是还是这个 exports 对象，就能够正常取值啦。

大致原理就是这么简单，只不过这里给exports赋值的方式是通过代理做到的。

接下来我们看看Webpack的打包后的代码（经优化）：

从构建产物洞悉模块化原理

//模块定义
var modules = {
  "./src/name.js": (module, exports, require) => {
    //给该模块设置tag：标识这是一个ES Module
    require.setModuleTag(exports);
    //通过代理给exports设置属性值
    require.defineProperty(exports, {
      age: () => age,
      default: () => DEFAULT_EXPORT,
    });
    const author = "不要秃头啊";
    const age = "18";
    const DEFAULT_EXPORT = author;
  },
};

var cache = {};
function require(modulePath) {
  var cachedModule = cache[modulePath];
  if (cachedModule !== undefined) {
    return cachedModule.exports;
  }
  var module = (cache[modulePath] = {
    exports: {},
  });
  modules[modulePath](module, module.exports, require);
  return module.exports;
}

//对exports对象做代理
require.defineProperty = (exports, definition) => {
  for (var key in definition) {
    Object.defineProperty(exports, key, {
      enumerable: true,
      get: definition[key],
    });
  }
};

//标识模块的类型为ES Module
require.setModuleTag = (exports) => {
  Object.defineProperty(exports, Symbol.toStringTag, {
    value: "Module",
  });

  Object.defineProperty(exports, "__esModule", {
    value: true,
  });
};

//以下是main.js编译后的代码
//拿到模块导出对象exports
var _name__WEBPACK_IMPORTED_MODULE_0__ = require("./src/name.js");

console.log(_name__WEBPACK_IMPORTED_MODULE_0__["default"], "author");
console.log(_name__WEBPACK_IMPORTED_MODULE_0__.age, "age");

这里与 CommonJS 模块化原理不同的在于：

  1. 通过 require.setModuleTag 函数来标识这是一个ES Module(在现在这个例子中其实没什么作用)
  2. 给传入的 exports 对象通过 Object.defineProperty 做了一层代理（这样当访问default属性时，其实访问的是DEFAULT_EXPORT变量，访问age属性时，访问的是age变量）。

九、CommonJS 加载 ES Module的原理

后面的代码就不带着大家一起读了，其实都和前面大同小异。相信大家如果能够看到这里，是一定可以轻松读懂的。

name.js:

export const age = 18;
export default "不要秃头啊";

main.js:

let obj = require("./name");
console.log(obj, "obj");

对打包后的代码进行分析（经过优化）：

var modules = {
  "./src/name.js": (module, exports, require) => {
    require.setModuleTag(exports);
    require.defineProperty(exports, {
      age: () => age,
      default: () => DEFAULT_EXPORT,
    });
    const age = 18;
    const DEFAULT_EXPORT = "不要秃头啊";
  },
};
var cache = {};
function require(moduleId) {
  var cachedModule = cache[moduleId];
  if (cachedModule !== undefined) {
    return cachedModule.exports;
  }
  var module = (cache[moduleId] = {
    exports: {},
  });
  modules[moduleId](module, module.exports, require);
  return module.exports;
}

require.defineProperty = (exports, definition) => {
  for (var key in definition) {
    Object.defineProperty(exports, key, {
      enumerable: true,
      get: definition[key],
    });
  }
};

require.setModuleTag = (exports) => {
  Object.defineProperty(exports, Symbol.toStringTag, {
    value: "Module",
  });

  Object.defineProperty(exports, "__esModule", {
    value: true,
  });
};

(() => {
  let obj = require("./src/name.js");
  console.log(obj, "obj");
})();

运行结果：

{ age: [Getter], default: [Getter] } obj

十、ES Module加载CommonJS的原理

name.js:

module.exports = "不要秃头啊";

main.js：

import author from "./name";

console.log(author, "author");

这一步的思路其实跟前面基本上相同，唯一的区别在于多了个require.n函数，它用来返回模块的默认导出内容，核心思想依旧是将最终模块的内容导出为一个 exports 对象。

对打包后的代码进行分析（经过优化）：

var modules = {
  "./src/name.js": (module) => {
    module.exports = "不要秃头啊";
  },
};
var cache = {};
function require(modulePath) {
  var cachedModule = cache[modulePath];
  if (cachedModule !== undefined) {
    return cachedModule.exports;
  }
  var module = (cache[modulePath] = {
    exports: {},
  });
  modules[modulePath](module, module.exports, require);
  return module.exports;
}

require.n = (module) => {
  var getter =
    module && module.__esModule ? () => module["default"] : () => module;
  require.defineProperty(getter, {
    a: getter,
  });
  return getter;
};

require.defineProperty = (exports, definition) => {
  for (var key in definition) {
    Object.defineProperty(exports, key, {
      enumerable: true,
      get: definition[key],
    });
  }
};

require.setModuleTag = (exports) => {
  Object.defineProperty(exports, Symbol.toStringTag, {
    value: "Module",
  });

  Object.defineProperty(exports, "__esModule", {
    value: true,
  });
};

var __webpack_exports__ = {};
(() => {
  "use strict";
  require.setModuleTag(__webpack_exports__);
  var _name__WEBPACK_IMPORTED_MODULE_0__ = require("./src/name.js");
  var _name__WEBPACK_IMPORTED_MODULE_0___default = require.n(
    _name__WEBPACK_IMPORTED_MODULE_0__
  );
  console.log(_name__WEBPACK_IMPORTED_MODULE_0___default(), "author");
})();

十一、总结

该篇文章从构建产物的角度出发，带领大家从各个角度分析 Webpack 中模块化的原理。整体代码量不多，却能够支持各种模块间的相互引用，设计比较巧妙。重在理解其中设计思想，建议大家反复阅读。

最后，通过一道代码执行题来看看大家到底掌握没有哦！考点是这些模块化规范是如何解决循环依赖的问题的。

  • a.js文件
const getMes = require('./b')
console.log('我是 a 文件')
exports.say = function(){
    const message = getMes()
    console.log(message)
}
  • b.js文件
const say = require('./a')
const  object = {
   name:'从构建产物洞悉模块化原理',
   author:'不要秃头啊'
}
console.log('我是 b 文件')
module.exports = function(){
    return object
}
  • 主文件main.js
const a = require('./a')
const b = require('./b')

console.log('node 入口文件')

接下来执行 main.js 文件，控制台会输出什么呢？评论区告诉我哦😁😁😁。

十二、推荐阅读

  1. 从零到亿系统性的建立前端构建知识体系✨
  2. 我是如何带领团队从零到一建立前端规范的？🎉🎉🎉
  3. 【Webpack Plugin】写了个插件跟喜欢的女生表白，结果......😭😭😭
  4. 前端工程化基石 -- AST（抽象语法树）以及AST的广泛应用🔥
  5. 学会这些自定义hooks，让你摸鱼时间再翻一倍🐟🐟
  6. 浅析前端异常及降级处理
  7. 前端重新部署后，领导跟我说页面崩溃了...
  8. 前端场景下的搜索框，你真的理解了吗？
  9. 手把手教你实现React数据持久化机制
  10. 面试官：你确定多窗口之间sessionStorage不能共享状态吗？？？🤔

参考文献：

转载自:https://juejin.cn/post/7147365025047379981
评论
请登录