首页 > 其他分享 >webpack模块化的原理

webpack模块化的原理

时间:2022-10-10 19:46:45浏览次数:83  
标签:__ function exports 模块化 require module webpack 原理

commonjs

在webpack中既可以书写commonjs模块也可以书写es模块,而且不用考虑浏览器的兼容性问题,我们来分析一下原理。

首先搞清楚commonjs模块化的处理方式,简单配置一下webpack,写两个模块编译一下看一下:

webpack.config.js

module.exports = {
    mode: "development",
    devtool: "none"
}

index.js

const a = require('./a')
console.log(a)

a.js

const a = 'a';
module.exports = a;

编译结果

查看编译结果,可以发现webpack对于每个模块的做法类似于node,将每个模块放在一个函数环境中并向其中传入一些必要的参数。webpack将这些模块组成一个对象(属性名是模块路径(模块id),属性值为模块内容)传入一个立即执行函数,立即执行函数中定义了一个函数 __webpack_require__类似node中的require函数,实现了导入模块的作用。

打包结果中删去了一些注释和暂时用不要的代码,可以很明显的看出来实现commonjs模块化的关键就是这个 __webpack_require__ 函数,通过传入模块id来得到模块的导出。

require 函数

__webpack_require__ 函数的实现:

function __webpack_require__(moduleId) {
    // Check if module is in cache
    if (installedModules[moduleId]) {
        return installedModules[moduleId].exports;
    }
    // Create a new module (and put it into the cache)
    var module = installedModules[moduleId] = {
        i: moduleId,
        l: false,
        exports: {}
    };
    // Execute the module function
    modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
    // Flag the module as loaded
    module.l = true;
    // Return the exports of the module
    return module.exports;
}

如果熟悉node就很容易理解这个函数了:

  1. 首先查看这个模块是否已经被加载过,所以就需要一个全局变量installedModules用来记录所有被加载过模块的导出
  2. 没有加载过的模块就先构造一个module对象,关键是要有一个 exports 属性
  3. 执行模块代码并返回模块导出值

最终的一步就是需要加载启动模块,也就是IIFE的最后一句:

return __webpack_require__("./src/index.js");

ES Module

es 模块化的处理方式是需要借助 __webpack_require__ 实现的,首先看一些刚才被删除的代码:

  1. __webpack_require__.r

    该函数用于标识es模块的导出

    // define __esModule on exports
    __webpack_require__.r = function (exports) {
       if (typeof Symbol !== 'undefined' && Symbol.toStringTag) {
           Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
       }
       Object.defineProperty(exports, '__esModule', { value: true });
    };
    
    
  2. __webpack_require__.d

    用于处理es模块的具名导出

    // define getter function for harmony exports
    __webpack_require__.d = function (exports, name, getter) {
       if (!__webpack_require__.o(exports, name)) {
           Object.defineProperty(exports, name, { enumerable: true, get: getter });
       }
    };
    
    
  3. __webpack_require__.o

    就是给 hasOwnPreperty 换了个名字

    __webpack_require__.o = 
       function (object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
    
    

我们改一下模块代码看看纯es Module导入导出的编译结果:

index.js

import a, { test } from './a'
import b from './b'
console.log(a);
test();
console.log(b)

a.js

const a = 'a';
function test() { }
export default a;
export { test }

b.js

const b = 'b';
export default b;

编译结果

{
    "./src/a.js": (function (module, __webpack_exports__, __webpack_require__) {

        "use strict";
        __webpack_require__.r(__webpack_exports__);
        /* harmony export (binding) */
        __webpack_require__.d(__webpack_exports__, "test", function () { return test; });

        const a = 'a';

        function test() { }

        /* harmony default export */
        __webpack_exports__["default"] = (a);
    }),
    "./src/b.js": (function (module, __webpack_exports__, __webpack_require__) {

        "use strict";
        __webpack_require__.r(__webpack_exports__);
        const b = 'b';

        /* harmony default export */
        __webpack_exports__["default"] = (b);

    }),
    "./src/index.js": (function (module, __webpack_exports__, __webpack_require__) {

        "use strict";
        __webpack_require__.r(__webpack_exports__);
        /* harmony import */
        var _a__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("./src/a.js");
        /* harmony import */
        var _b__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__("./src/b.js");

        console.log(_a__WEBPACK_IMPORTED_MODULE_0__["default"])

        Object(_a__WEBPACK_IMPORTED_MODULE_0__["test"])();

        console.log(_b__WEBPACK_IMPORTED_MODULE_1__["default"])
    })
}

根据编译结果可以很明白的看出来,和 commonjs 编译出来的结果差不多,核心都是使用 __webpack_require__ 函数,区别在于es模块化,exports 对象首先就会被__webpack_require__.r标记为es module,对于默认导出就是 exportsdefault 属性,对于具名导出使用 __webpack_require__.d 包装了一下,目的是让这些具名导出在模块之外只能读不能被修改(这是es module的特点)。参考webpack视频讲解:进入学习

v5 的变化

但是为什么 default 没有被__webpack_require__.d 处理,这不合理啊。本来是使用的 webpack 4打包的,然后换了webpack 5试了一下,webpack 5打包的结果中 default 也被处理了,这可能是webpack 4的一个小bug吧。

webpack5的编译结果有些许的不同,但是整个逻辑是没有变的:

两种模块化交互

webpack 是支持两种模块化代码共存的,虽然不建议这样做。首先我们先看一下他们互相导入的时候的导入结果是什么样的:

我们来看看 webpack 是如何实现的,先修改一下模块:

index.js

const { a, test } = require('./a')

a.js

import b from './b'
import * as bbb from './b'
console.log(bbb)
console.log(b)
console.log(b.b)
const a = 'a';
function test() { }
export default a;
export { test };

b.js

module.exports = {
  b: () => { },
  moduleName: 'b'
}

编译结果

{
  "./src/a.js":
    (function (module, __webpack_exports__, __webpack_require__) {

      "use strict";
      __webpack_require__.r(__webpack_exports__);
      /* harmony export (binding) */
      __webpack_require__.d(__webpack_exports__, "test", function () { return test; });
      /* harmony import */
      var _b__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("./src/b.js");
      /* harmony import */
      var _b__WEBPACK_IMPORTED_MODULE_0___default = __webpack_require__.n(_b__WEBPACK_IMPORTED_MODULE_0__);

      console.log(_b__WEBPACK_IMPORTED_MODULE_0__)

      console.log(_b__WEBPACK_IMPORTED_MODULE_0___default.a)

      console.log(_b__WEBPACK_IMPORTED_MODULE_0___default.a.b)

      const a = 'a';

      function test() { }

      /* harmony default export */
      __webpack_exports__["default"] = (a);
    }),
  "./src/b.js": (function (module, exports) {

    module.exports = {
      b: () => { },
      moduleName: 'b'
    }
  }),
  "./src/index.js": (function (module, exports, __webpack_require__) {

    const { a, test } = __webpack_require__("./src/a.js")
  })
}

可以发现当通过es模块的方式去 import 一个commonjs模块时,就会把导入的模块进行一层包装,通过 __webpack_require__.n,主要目的应该是为了兼容 import * as obj from '....' 这样的语法。

该函数的具体实现:

__webpack_require__.n = function (module) {
    var getter = module && module.__esModule 
    ? function getDefault() { return module['default']; }
    : function getModuleExports() { return module; };
    __webpack_require__.d(getter, 'a', getter);
    return getter;
}

总结

webpack 中实现模块化的核心就是 __webpack_require__ 函数,无论是commonjs模块化还是es 模块都是通过该函数来导入的。并且利用立即执行函数的特点实现了作用域的封闭避免了全局变量的污染,非常的巧妙。

标签:__,function,exports,模块化,require,module,webpack,原理
From: https://www.cnblogs.com/gogo2027/p/16776903.html

相关文章

  • AcWing算法提高课 容斥原理
    容斥原理的复杂度是2^n,一般n不会很大形如:  由于容斥原理一共有2^n中选法,可以用二进制枚举,1表示选择某个条件。然后将偶数个1的状态加起来,奇数个1的状态减去例题:ht......
  • Mysql之主从复制原理
    1.主从复制步骤: 具体步骤:1、从库通过手工执行changemasterto语句连接主库,提供了连接的用户一切条件(user、password、port、ip),并且让从库知道,二进制日志的起点位置......
  • 详解webpack构建优化
    当项目越来越复杂时,会面临着构建速度慢和构建出来的文件体积大的问题。webapck构建优化对于大项目是必须要考虑的一件事,下面我们就从速度和体积两方面来探讨构建优化的策略......
  • 002 模块化开发
    [A] 模块与组件,模块化与组件化的理解模块1.向外提供特定功能的js程序,一般就是一个js文件,其本质是一系列的js语句集合2.为什么要拆分模块,随着业......
  • 聊聊Vuex原理
    背景Vuex是一个专为Vue.js应用程序开发的状态管理模式。Vuex是专门为Vue.js设计的状态管理库,以利用Vue.js的细粒度数据响应机制来进行高效的状态更新。如果你已......
  • 手写一个Callable和FutureTask,异步线程执行并得到结果,了解其原理
    一,先模拟源码的Callable创建自己的MyCallablepackagecom.example.test.demo.thread.callable;publicinterfaceMyCallable<T>{Tcall();}二,创建自己的Futur......
  • 【SNN脉冲神经网络】SNN脉冲神经网络的工作原理演示MATLAB仿真带GUI界面
    clc;clearall;closeall;%初始参数I=10;sigma=0.04;beta=5;gamma=140;a=0.02;b=0.2;c=-65;d=2;%步长,改进欧拉法的相关参数step=0.1;timeConter=0:st......
  • 深度探讨react-hooks实现原理
    reacthooks实现Hooks解决了什么问题在React的设计哲学中,简单的来说可以用下面这条公式来表示:UI=f(data)等号的左边时UI代表的最终画出来的界面;等号的右边是......
  • 永磁同步电机的原理介绍
         永磁同步电机(PMSM)基本结构为定子、转子和端盖。其中转子磁路结构是永磁同步电机(PMSM)与其它电机最主要的区别,其在很大程度上决定了永磁同步电机(PMSM)的实际性能......
  • 初识内存中的数据——由浅入深理解程序的底层实现原理(一)
    引言:要想成为一名合格的开发者,掌握计算机系统工作原理是必须的,而在学这些之前应具有一门编程语言(汇编最好)的基础和一些计算机底层基础。本篇,我将从零开始一步步地探究高级......