• 浅析babel产出


      (function(modules) {
        // 缓存对象
        var installedModules = {};
    
        // require方法
        function __webpack_require__(moduleId) {
            // 是否命中缓存
            if (installedModules[moduleId]) {
                return installedModules[moduleId].exports;
            }
            // 新建 + 缓存
            var module = (installedModules[moduleId] = {
                i: moduleId,
                l: false,
                exports: {}
            });
    
            // 执行module方法
            modules[moduleId].call(
                module.exports,
                module,
                module.exports,
                __webpack_require__
            );
    
            // 标志是否已加载模块,之后缓存里会走
            module.l = true;
    
            return module.exports;
        }
    
        // expose the modules object (__webpack_modules__)
        __webpack_require__.m = modules;
    
        // expose the module cache
        __webpack_require__.c = installedModules;
    
    
        // 设置commonjs导出的对象上的a的值
        __webpack_require__.d = function(exports, name, getter) {
            if (!__webpack_require__._hasOwnProperty(exports, name)) {
                // 利用 getter 可以通过a获取到module的值
                Object.defineProperty(exports, name, {
                    enumerable: true,
                    get: getter
                });
            }
        };
    
        // 定义 __esModule 标志
        __webpack_require__.r = function(exports) {
            if (typeof Symbol !== 'undefined' && Symbol.toStringTag) {
                Object.defineProperty(exports, Symbol.toStringTag, {
                    value: 'Module'
                });
            }
            Object.defineProperty(exports, '__esModule', {value: true});
        };
    
        // 适配commonjs规范
        // 导出的为 require.a => 执行 getter函数 获得导出的内容
        __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;
        };
    
        // Object.prototype.hasOwnProperty.call
        __webpack_require__._hasOwnProperty = function(object, property) {
            return Object.prototype.hasOwnProperty.call(object, property);
        };
    })({})
    

    概述下上面打包后的代码,是一个立即执行函数,接受的参数是一个对象,对象的key为引入的模块路径,对应的value为导出的内容,不过babel会根据ejs or cjs来进行不同的适配导出。
    iife函数内为:

    1. installedModules 闭包环境缓存模块对象
    2. webpack_require 变种的require方法
    3. webpack_require.d 适配commonjs的转换方法
    4. webpack_require.r 给babel转换的es6模块增加标志,也就是通过该方法来设置区分ejs 和 cjs的标志
    5. _webpack_require.n 根据 __esModule 导出

    举例说明:

    我们有以下几个文件,内容都很简单。

    // es6.js
    export default {
        type: 'esjs'
    }
    
    // commonjs.js
    module.exports = {
        type: 'commonjs'
    }
    
    // index.js
    import es6 from './es6';
    import conmon from './commonjs';
    
    console.log(require('./es6'));
    console.log(es6, 'import来的');
    
    console.log(require('./commonjs'));
    console.log(conmon, 'import来的');
    

    通过webpack打包后的输出内容我们只取上面iife函数的参数部分,并去掉eval来提升可读性。

    // bundle.js
    
    (function(modules){
    // ******
    // 巴拉巴拉
    // ******
        // Load entry module and return exports
        return __webpack_require__((__webpack_require__.s = './index.js'));
    })({
        './commonjs.js': function(module, exports) {
            module.exports = {type: 'commonjs'};
        },
        './es6.js': function(module, __webpack_exports__, __webpack_require__) {
            __webpack_require__.r(__webpack_exports__);
            
            // 相当于 module.exports.default,这就是为什么我们require的时候,需要加上 .default
            __webpack_exports__['default'] = {
                type: 'esjs'
            };
        },
        './index.js': function(module, __webpack_exports__, __webpack_require__) {
            __webpack_require__.r(__webpack_exports__);
            var es6FromImport = __webpack_require__('./es6.js');
            var commonjsFromImport = __webpack_require__(
                './commonjs.js'
            );
            var commonjsFromImport_default = __webpack_require__.n(
                commonjsFromImport
            );
            console.log(__webpack_require__('./es6.js'));
            console.log(es6FromImport['default'], 'import来的');
    
            console.log(__webpack_require__('./commonjs.js'));
            console.log(
                commonjsFromImport_default.a,
                'import来的'
            );
        }
    })
    

    一点点分析,从入口开始 => webpack_require('./index.js')
    首先会查看是否命中缓存,如果命中,那理所当然直接返回,否则进行新建 + 缓存的操作,边边角角直接略过,咱们看下面这个方法:

    
      // 新建
      var module = (installedModules[moduleId] = {
          i: moduleId,
          l: false,
          exports: {} 
      });
      
      // 赋值
      modules[moduleId].call(
          module.exports,
          module,
          module.exports,
          __webpack_require__
      );
      
      // 导出
      return module.exports;
      
    

    首先新建,并创建默认的导出对象,这也就说明了为什么文件没有导出,默认是{}的问题,然后,利用call传递函数执行上下文环境,并传入module, module.exports, webpack_require 参数,最后return了module中的exports的值。

    来看关键的赋值这一步。
    针对es6js,因为你是export default,所以babel会增加一个__esModule变量,进行ejs的标识,因为我们导出的时候,会根据ejs规范,导出得对象赋值到default上,如下

    // 赋值 __esModule
    __webpack_require__.r(__webpack_exports__);
    __webpack_exports__['default'] = {
        type: 'esjs'
    };
    

    当我们使用ejs规范import的时候,babel会进行default的读取,所以我们可以直接获取到我们想要的值,然后如果你使用require的话,babel会按照commonjs直接进行读取,所以会导致我们需要 .default 才能拿到我们真正想要的值,结果如下

    针对cjs,由于使用cjs规范,所以我们的导出是不涉及default的,即

        module.exports = { type: 'commonjs' }
    

    其实我们直接导出即可,因为 webpack_require 的返回值就是 module.exports。
    不过打包后的代码用 webpack_require.n 对commonjs的导出做了处理,判断是否为 es6 规范的导出,如果是那么导出default,不是直接导出module.exports,然后使用 getter 设置返回函数的a属性,获取a属性即返回cjs module的导出,猜测这是对es6 import的统一处理。

      // require
      var commonjsFromImport = __webpack_require__('./commonjs.js');
      // 设置getter
      var commonjsFromImport_default = __webpack_require__.n(commonjsFromImport);
    
      console.log(commonjsFromImport_default.a, 'import来的');
    

    结果如下:

    简单总结

    require 对 ejs 规范的导出不是很友好,换句话说,考虑的很单一,所以会有default的问题
    import 适配的 ejs 和 cjs,会根据 __esModule 进行导出的判断,返回使用者真正想要的

    不过进步一认证,发现如果是ejs的导出,会直接导出__webpack_export__['default'],也就是 module.export.defualt,看起来不需要处理 __esModule 的请求,暂时还不清楚到底是怎么回事。有缘窃听下回分解吧。

    具体babel是怎么解析的,暂时不涉及,只分析结果,得出一点点结论。

    小提示

    类似这种的代码 (0, foo.bar)() 相当于 foo.bar.call(winodw|global|this) 改变执行时的上下文环境

  • 相关阅读:
    ElasticSearch的高级复杂查询:非聚合查询和聚合查询
    js上传文件前判断获取文件大小并且加以判断
    如何使用IE9浏览器自带开发人员工具捕获网页请求
    目标的滚动条样式设置
    springmvc配置数据源方式
    SSO单点登录一:cas单点登录防止登出退出后刷新后退ticket失效报500错,也有退出后直接重新登录报票根验证错误
    解决myeclipse中新建javaweb工程,无法使用Web App Libraries问题
    敏捷宣言(十七)
    敏捷宣言(十六)
    敏捷宣言(十五)
  • 原文地址:https://www.cnblogs.com/xiaoyuxy/p/11983294.html
Copyright © 2020-2023  润新知