浅析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函数内为：

installedModules 闭包环境缓存模块对象
webpack_require 变种的require方法
webpack_require.d 适配commonjs的转换方法
webpack_require.r 给babel转换的es6模块增加标志，也就是通过该方法来设置区分ejs 和 cjs的标志
__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 才能拿到我们真正想要的值，结果如下

[图片上传失败...(image-7d657f-1575421330289)]

针对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来的');

结果如下：

[图片上传失败...(image-cc5cfe-1575421330289)]