关于前端:Webpack-模块化原理和SourceMap

49次阅读

共计 8995 个字符，预计需要花费 23 分钟才能阅读完成。

写作不易，未经作者容许禁止以任何模式转载！
如果感觉文章不错，欢送关注、点赞和分享！
掘金原文链接

Webpack 模块化

  • Webpack 打包的代码，容许咱们应用各种各样的模块化，然而最罕用的是 CommonJS、ES Module。

  • 包含如下原理:

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

CommonJS 原理：

打包前

const {dateFormat, priceFormat} = require('./js/format');

console.log(dateFormat("abc"));
console.log(priceFormat("abc"));

打包后

// 定义了一个对象
// 模块的门路(key): 函数(value)
var __webpack_modules__ = {
  "./src/js/format.js":
    (function (module) {const dateFormat = (date) => {return "2020-12-12";}
      const priceFormat = (price) => {return "100.00";}

      // 将咱们要导出的变量, 放入到 module 对象中的 exports 对象
      module.exports = {
        dateFormat,
        priceFormat
      }
    })
}

// 定义一个对象, 作为加载模块的缓存
var __webpack_module_cache__ = {};

// 是一个函数, 当咱们加载一个模块时, 都会通过这个函数来加载
function __webpack_require__(moduleId) {
  // 1. 判断缓存中是否曾经加载过
  if (__webpack_module_cache__[moduleId]) {return __webpack_module_cache__[moduleId].exports;
  }

  // 2. 给 module 变量和__webpack_module_cache__[moduleId]赋值了同一个对象
  var module = __webpack_module_cache__[moduleId] = {exports: {} };

  // 3. 加载执行模块
  __webpack_modules__[moduleId](module, module.exports, __webpack_require__);

  // 4. 导出 module.exports {dateFormat: function, priceForamt: function}
  return module.exports;
}


// 具体开始执行代码逻辑
!function () {
  // 1. 加载./src/js/format.js
  const {dateFormat, priceFormat} = __webpack_require__("./src/js/format.js");
  console.log(dateFormat("abc"));
  console.log(priceFormat("abc"));
}();

ES Module 原理

打包前

import {sum, mul} from "./js/math";

console.log(mul(20, 30));
console.log(sum(20, 30));

打包后

// 1. 定义了一个对象, 对象外面放的是咱们的模块映射
var __webpack_modules__ = {
  "./src/es_index.js":
    (function (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
      // 调用 r 的目标是记录时一个__esModule -> true
      __webpack_require__.r(__webpack_exports__);

      // _js_math__WEBPACK_IMPORTED_MODULE_0__ == exports
      var _js_math__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("./src/js/math.js");

      console.log(_js_math__WEBPACK_IMPORTED_MODULE_0__.mul(20, 30));
      console.log(_js_math__WEBPACK_IMPORTED_MODULE_0__.sum(20, 30));
    }),
  "./src/js/math.js":
    (function (__unused_webpack_module, __webpack_exports__, __webpack_require__) {__webpack_require__.r(__webpack_exports__);

      // 调用了 d 函数: 给 exports 设置了一个代理 definition
      // exports 对象中自身是没有对应的函数
      __webpack_require__.d(__webpack_exports__, {"sum": function () {return sum;},
        "mul": function () { return mul;}
      });

      const sum = (num1, num2) => {return num1 + num2;}
      const mul = (num1, num2) => {return num1 * num2;}
    })
};

// 2. 模块的缓存
var __webpack_module_cache__ = {};

// 3.require 函数的实现(加载模块)
function __webpack_require__(moduleId) {if (__webpack_module_cache__[moduleId]) {return __webpack_module_cache__[moduleId].exports;
  }
  var module = __webpack_module_cache__[moduleId] = {exports: {}
  };
  __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
  return module.exports;
}

!function () {
  // __webpack_require__这个函数对象增加了一个属性: d -> 值 function
  __webpack_require__.d = function (exports, definition) {for (var key in definition) {if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
      }
    }
  };
}();


!function () {
  // __webpack_require__这个函数对象增加了一个属性: o -> 值 function 
  __webpack_require__.o = function (obj, prop) {return Object.prototype.hasOwnProperty.call(obj, prop); }
}();

!function () {
  // __webpack_require__这个函数对象增加了一个属性: r -> 值 function
  __webpack_require__.r = function (exports) {if (typeof Symbol !== 'undefined' && Symbol.toStringTag) {Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module'});
    }
    Object.defineProperty(exports, '__esModule', { value: true});
  };
}();


__webpack_require__("./src/es_index.js");

ES Module 和 CommonJS 混合导入导出

打包前

// es module 导出内容, CommonJS 导入内容
const {sum, mul} = require("./js/math");

// CommonJS 导出内容, es module 导入内容
import {dateFormat, priceFormat} from "./js/format";

console.log(sum(20, 30));
console.log(mul(20, 30));

console.log(dateFormat("aaa"));
console.log(priceFormat("bbb"));

console.log(abc);

打包后

var __webpack_modules__ = ({
  "./src/index.js":
    (function (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
      "use strict";
      __webpack_require__.r(__webpack_exports__);
      var _js_format__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("./src/js/format.js");
      var _js_format__WEBPACK_IMPORTED_MODULE_0___default = __webpack_require__.n(_js_format__WEBPACK_IMPORTED_MODULE_0__);
      
      // es module 导出内容, CommonJS 导入内容
      const math = __webpack_require__("./src/js/math.js");

      // CommonJS 导出内容, es module 导入内容
      console.log(math.sum(20, 30));
      console.log(math.mul(20, 30));
      console.log(_js_format__WEBPACK_IMPORTED_MODULE_0___default().dateFormat("aaa"));
      console.log(_js_format__WEBPACK_IMPORTED_MODULE_0___default().priceFormat("bbb"));
    }),
  "./src/js/format.js":
    (function (module) {const dateFormat = (date) => {return "2020-12-12";}
      const priceFormat = (price) => {return "100.00";}
      module.exports = {
        dateFormat,
        priceFormat
      }
    }),

  "./src/js/math.js":
    (function (__unused_webpack_module, __webpack_exports__, __webpack_require__) {__webpack_require__.r(__webpack_exports__);
      __webpack_require__.d(__webpack_exports__, {"sum": function () {return sum;},
        "mul": function () { return mul;}
      });
      const sum = (num1, num2) => {return num1 + num2;}

      const mul = (num1, num2) => {return num1 * num2;}
    })
});

var __webpack_module_cache__ = {};

// The require function
function __webpack_require__(moduleId) {
  // Check if module is in cache
  if (__webpack_module_cache__[moduleId]) {return __webpack_module_cache__[moduleId].exports;
  }
  // Create a new module (and put it into the cache)
  var module = __webpack_module_cache__[moduleId] = {
    // no module.id needed
    // no module.loaded needed
    exports: {}};

  // Execute the module function
  __webpack_modules__[moduleId](module, module.exports, __webpack_require__);

  // Return the exports of the module
  return module.exports;
}

!function () {
  // getDefaultExport function for compatibility with non-harmony modules
  __webpack_require__.n = function (module) {
    var getter = module && module.__esModule ?
      function () { return module['default']; } :
      function () { return module;};
    __webpack_require__.d(getter, { a: getter});
    return getter;
  };
}();

/* webpack/runtime/define property getters */
!function () {
  // define getter functions for harmony exports
  __webpack_require__.d = function (exports, definition) {for (var key in definition) {if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
      }
    }
  };
}();

/* webpack/runtime/hasOwnProperty shorthand */
!function () {__webpack_require__.o = function (obj, prop) {return Object.prototype.hasOwnProperty.call(obj, prop); }
}();

/* webpack/runtime/make namespace object */
!function () {
  // 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});
  };
}();

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

总结

原理都是相似的

  1. 通过一个 webpack_module 对象来存储模块化代码

    • key 为文件名称
    • value 为文件代码
  2. 通过 webpack_module_cache 来缓存模块化代码
  3. 通通过 webpack_require 来从 webpack_module_cache 或 webpack_module 中读取并从引入代码

意识 Source-Map

参考文档

  • 咱们的代码通常运行在浏览器上时，是通过打包压缩的:

    • 也就是实在跑在浏览器上的代码，和咱们编写的代码其实是有差别的;
    • 比方 ES6 的代码可能被转换成 ES5;
    • 比方对应的代码行号、列号在通过编译后必定会不统一;
    • 比方代码进行美化压缩时，会将编码名称等批改;
    • 比方咱们应用了 TypeScript 等形式编写的代码，最终转换成 JavaScript;

  • 通过 SourceMap 能够调试这种转换后不统一的代码

    • source-map 是从已转换的代码，映射到原始的源文件;
    • 使浏览器能够重构原始源并在调试器中显示重建的原始源;
    • 更容易定位到源文件谬误

如何应用 SourceMap

  • 第一步: 依据源文件，生成 source-map 文件，webpack 在打包时，能够通过配置生成 source-map;

    devtool:'source-map'

  • 第二步: 在转换后的代码，最初增加一个正文，它指向 sourcemap;

    //# sourceMappingURL=common.bundle.js.map

  • 浏览器会依据咱们的正文，查找相应的 source-map，并且依据 source-map 还原咱们的代码，不便进行调试。

  • 在 Chrome 中，咱们能够依照如下的形式关上 source-map:

    • √Enable JavaScript source maps
    • √Enable CSS source maps
  • 最后 source-map 生成的文件带下是原始文件的 10 倍，第二版缩小了约 50%，第三版又缩小了 50%，所以目前一个 133kb 的文件，最终的 source-map 的大小大略在 300kb。

  • 目前的 source-map 长什么样子？

    • version: 以后应用的版本，也就是最新的第三版;
    • sources: 从哪些文件转换过去的 source-map 和打包的代码(最初始的文件);
    • names: 转换前的变量和属性名称(因为目前应用的是 development 模式，所以不须要保留转换前的名称);
    • mappings:source-map 用来和源文件映射的信息 (比方地位信息等)，一串 base64 VLQ(veriable- length quantity 可变长度值) 编码;
    • file: 打包后的文件(浏览器加载的文件);
    • sourceContent: 转换前的具体代码信息(和 sources 是对应的关系);
    • sourceRoot: 所有的 sources 绝对的根目录;

生成 SourceMap

如何在应用 webpack 打包的时候，生成对应的 source-map?

  • webpack 为咱们提供了十分多的选项(目前是 26 个)，来解决 source-map;
  • 参考文档：https://webpack.docschina.org…
  • 抉择不同的值，生成的 source-map 会略微有差别，打包的过程也会有性能的差别，能够依据不同的状况进行 抉择;

上面几个值不会生成 source-map

  • false: 不应用 source-map，也就是没有任何和 source-map 相干的内容。
  • none:production 模式下的默认值（什么值都不写），不生成 source-map。

  • eval:development 模式下的默认值，不生成 source-map

    • 然而它会在 eval 执行的代码中，增加 //# sourceURL=;
    • 它会被浏览器在执行时解析，并且在调试面板中生成对应的一些文件目录，不便咱们调试代码;

应用 source-map 的值

  • source-map

    • 生成独立的 source-map 文件，并在打包后的 JS 文件中有一个正文指向 source-map 文件；

      • 正文：` //# sourceMappingURL=bundle.js.map

  • eval-source-map

    • source-map 以 DataUrl 的模式增加到 eval 函数前面

  • inline-source-map

    • source-map 以 DataUrl 的模式增加到打包后的 JS 文件前面（正文）

  • cheap-source-map:

    • 会生成 source-map，然而会更加高效一些(cheap 低开销)，因为它没有生成列映射(Column Mapping)
    • 因为在开发中，咱们只须要行信息通常就能够定位到谬误了

  • cheap-module-source-map:

    • 会生成 source-map，相似于 cheap-source-map，然而对源自 loader 的 source-map 解决会更好。
    • 对源自 loader 的 source-map 解决会更好，官网也没有给出很好的解释 其实是如果 loader 对咱们的源码进行了非凡的解决，比方 babel, 会复原成源文件的代码模块格局，例如不会删除自定义的空行。

  • hidden-source-map:

    • 会生成 sourcemap，然而不会对 source-map 文件进行援用;
    • 相当于删除了打包文件中对 sourcemap 的援用正文
    • \# sourceMappingURL=bundle.js.map
    • 如果手动增加进来，那么 source-map 就会失效了

  • nosources-source-map:

    • 会生成 sourcemap，然而生成的 sourcemap 只有错误信息的提醒，不会生成源代码文件;
    • 点击错误信息也无奈查看源码

多个值的组合

  • 事实上，webpack 提供给咱们的 26 个值，是能够进行多组合的。
  • 组合的规定如下:
  • inline-|hidden-|eval: 三个值时三选一;
  • nosources: 可选值;
  • cheap 可选值，并且能够追随 module 的值;

那么在开发中，最佳的实际是什么呢?

  • 开发阶段: 举荐应用 source-map 或者 cheap-module-source-map

    • 这别离是 vue 和 react 应用的值，能够获取调试信息，不便疾速开发;

  • 测试阶段: 举荐应用 source-map 或者 cheap-module-source-map

    • 测试阶段咱们也心愿在浏览器下看到正确的谬误提醒;
  • 公布阶段:false、缺省值(不写)
  • 掘金原文链接
  • 掘金：前端 LeBron
  • 知乎：前端 LeBron
  • 继续分享技术博文，关注微信公众号👇🏻

正文完
前端
发表至： 前端
2021-06-02
 0
关于前端:详解BI系统中的任务调度
关于前端:那些高级前端是如何回答面试题的
关于前端:前端脚手架工具使用-Plop-快速构建项目文件
关于前端:干货分享安卓加固原理分享