美文网首页
webpack是怎么根据模块引用实现模块合并

webpack是怎么根据模块引用实现模块合并

作者: 风雅欢乐 | 来源:发表于2020-05-01 19:27 被阅读0次

假设我们有两个模块, 分别为index.js和a.js, 代码如下:

// 模块a
console.log("module a");
module.exports = "a";

另有index模块引入了模块a

console.log("index module");
var a = require("./a");
console.log(a);

在node环境中, 每个文件代表一个模块, 那么它是如何确保每个模块的变量不互相污染呢? 在node环境中, 每个模块内部的代码, 都被放入了一个函数环境内, 模块代码中所使用的的module, require, exports等都是这个函数的参数, 正因如此, 我们才能够在模块代码中直接使用require函数和module对象.

那么合并后的模块的代码就相当于

(function (modules) {
    // 提供require函数等

    // 执行入口模块
    require("./src/index.js");
})({
    "./src/a.js": function (module, exports, require) {
        console.log("module a");
        module.exports = "a";
    },
    "./src/index.js": function (module, exports, require) {
        console.log("index module");
        var a = require("../src/a.js");
        console.log(a);
    }
});

每一个模块的路径, 作为唯一标识, 可以确定一个模块. 这个模块放入一个函数中. require的模块也使用统一的路径格式. 这个立即执行函数里面, 就需要提供模块代码需要的require函数, module和exports对象. 并且立即执行函数里面, 一定会执行入口模块.

由于commonjs模块化标准会对模块进行缓存, require函数的作用, 就是查看某个模块是否曾经被加载过, 如果是, 则直接返回该模块的导出结果, 如果不是, 则运行该模块, 并且返回该模块导出的结果, 并且将该模块缓存. 那么这个立即执行函数中, 就需要有一个对象, 保存所有的缓存模块.
代码如下

(function (modules) {
    // 提供require函数等
    var installedModules = {
        "./src/a.js": {
            i: "./src/a.js",        // 模块id
            l: false,                 // 是否完成导入
            exports: "a"          // 模块的导出内容
        }
    };

    function require(moduleId) {
        if (installedModules[moduleId]) {
            return installedModules[moduleId].exports;
        }
        var module = installedModules[moduleId] = {
            i: moduleId,        // 模块id
            l: false,                 // 是否完成导入
            exports: {}          // 模块的导出内容
        };
        modules[moduleId].call(module.exports, module, module.exports, require);
        module.l = true;     // 此时完成载入, 设置l为true
        return module.exports;
    }

    // 执行入口模块
    require("./src/index.js");
})({
    "./src/a.js": function (module, exports, require) {
        console.log("module a");
        module.exports = "a";
    },
    "./src/index.js": function (module, exports, require) {
        console.log("index module");
        var a = require("../src/a.js");
        console.log(a);
    }
});

相关文章

  • webpack是怎么根据模块引用实现模块合并

    假设我们有两个模块, 分别为index.js和a.js, 代码如下: 另有index模块引入了模块a 在node环...

  • webpack入门教学

    一.什么是 Webpack Webpack 是一个模块打包器。它将根据模块的依赖关系进行静态分析,然后将这些模块按...

  • webpack 先这么用

    webpack 介绍Webpack 是一个模块打包器。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的...

  • Webpack介绍

    什么是Webpack webpack是一个模块打包器。它根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规...

  • 杂乱无章的 webpack 手记

    本文纯属个人笔记,毫无指导倾向和价值! 什么是webpack webpack 是模块打包器。根据模块的关系进行静态...

  • webpack学习之路

    webpack 是一个模块打包工具,输入为包含依赖关系的模块集,输出为打包合并的前端静态资源。webpack的lo...

  • webpack常用plugin

    webpack-merge 合并两个配置文件,他是webpack插件,引入webpack模块即可使用应用场景:区分...

  • Vue的组件为什么要export default

    Vue 的模块机制 Vue 是通过 webpack 实现的模块化,因此可以使用 import 来引入模块,例如: ...

  • webpack入门

    webpack定义 webpack是一个前端资源加载/打包工具,它将根据模块的依赖关系进行静态分析,然后将这些模块...

  • webpack打包后的文件简单分析

    webpack Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按...

网友评论

      本文标题:webpack是怎么根据模块引用实现模块合并

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