美文网首页前端开发那些事儿
Webpack 功能函数手写实现

Webpack 功能函数手写实现

作者: KK_boy | 来源:发表于2021-06-26 16:54 被阅读0次

    手写功能函数

    当我们用Webpac打包后,无论前面经历了什么,最终都会产生一个或多个目标JS文件。这些JS文件中主要是会生成一个自调用的函数,它会接收一个对象作为参数(我们称之为模块定义),然后用它的键作为查询的模块ID,它的值作为要执行的函数,在执行函数的过程中就完成了当前模块ID所对应的模块内容的加载,同时针对不同的模块类型,Webpack还会使用到不同的工具方法(例如:r、t、n、d ...).

    这里我们先不去考虑作为参数使用的模块定义对象是如何生成的,我们先来写一写这些工具方法,以便于能更加清晰的理解模块加载的流程,后续再关注其他的环节。

    任务:复现built.js里的函数

    缓存优先原则

    模拟打包后的js文件 built.js

    (function (modules) {
        // 01 定义对象用来缓存被加载过的对象
        let installedModules = {};
    
        // 02 定义一个 __webpack_require__ 方法替换 import require 加载操作
        function __webpack_require__(moduleId) {
            // 2-1 判断当前缓存是否存在要被加载的模块内容,如果存在则直接返回
            if (installedModules[moduleId]) {
                return installedModules[moduleId].exports;
            }
    
            // 2-2 如果缓存中不存在则需要我们自己定义{} 执行被导入的模块内容加载
            let module = installedModules[moduleId] = {
                i: moduleId,
                l: false,
                exports: {}
            }
    
            // 2-3 调用当前 moduleId 对应的函数,然后完成内容的加载
            modules[moduleId].call(module.exports, module, module.exports, __webpack_require__)
    
            // 2-4 当上述的方法完成调用之后,修改 l 的值用于表示当前模块已经加载完成
            module.l = true;
    
            // 2-5 加载工作完成之后,把内容返回至调用的位置
            return module.exports;
    
        }
    
        // 03 定义 m 属性用于保存 modules
        __webpack_require__.m = modules;
    
        // 04 定义 c 属性用于保存 cache
        __webpack_require__.c = installedModules;
    
        // 05 定义 o 方法用于判断对象的身上是否存在指定的属性
        __webpack_require__.o = function (object, property) {
            return Object.prototype.hasOwnProperty(object, property);
        }
    
        // 06 定义 d 方法用于在对象的身上添加指定的属性,同时给该属性提供一个 getter
        __webpack_require__.d = function (exports, name, getter) {
            if (!__webpack_require__.o(exports, name)) {
                Object.defineProperty(exports, name, { enumerable: true, get: getter })
            }
        }
    
        // 07 定义 r 方法用于识别当前模块是 es6 类型
        __webpack_require__.r = function (exports) {
            if (typeof Symbol !== 'undefined' && Symbol.toStringTag) {
                Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' })
            }
            Object.defineProperty(exports, '__esModule', { value: true })
        }
    
        // 08 定义 n 方法用于设置具体的 getter
        __webpack_require__.n = function (module) {
            let getter = module && module.__esModule ?
                function getDefault() { return module['default'] } :
                function getModuleExports() { return module }
    
            __webpack_require__.d(getter, 'a', getter)
    
            return getter;
        }
    
        // 09 定义 p 属性,用于保存资源访问路径
        __webpack_require__.p = ''
    
        // 10 调用 __webpack_require__ 执行模块导入与加载操作
        return __webpack_require__(__webpack_require__.s = './src/index.js');
    
    })
        ({
            "./src/index.js":
                (function (module, __webpack_exports__, __webpack_require__) {
                    "use strict";
                    __webpack_require__.r(__webpack_exports__);
          /* harmony import */ var _login__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./login */ "./src/login.js");
          /* harmony import */ var _login__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_login__WEBPACK_IMPORTED_MODULE_0__);
                    console.log('index.js 执行了!')
                    console.log(_login__WEBPACK_IMPORTED_MODULE_0___default.a, '<------');
                }),
            "./src/login.js":
                (function (module, exports) {
                    module.exports = 'kk学习'
                })
        });
    

    源码: 02-02-05-06-wp-source-handwritting

    相关文章

      网友评论

        本文标题:Webpack 功能函数手写实现

        本文链接:https://www.haomeiwen.com/subject/tgyzyltx.html