webpack之es6模块化原理

fen同学
2,103 阅读3分钟

准备代码

//bar.js
'use strict';
export default function bar(){
    return 'bar';
}
export function foo() {
    return 'foo';
}

//index.js
'use strict';
import bar from './bar';
function fun() {
    console.log(bar())
}

fun();

webpack配置

var path = require("path");
module.exports = {
    mode: 'development',
    entry: path.join(__dirname, './src/index.js'),
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'index.js?v=[hash:8]',
    },
};

打包后得到结果：

(function(modules) { // webpackBootstrap
  	// The module cache
  	var installedModules = {};
 
  	// The require function
  	function __webpack_require__(moduleId) {
 
  		// Check if module is in cache
  		if(installedModules[moduleId]) {
  			return installedModules[moduleId].exports;
  		}
  		// Create a new module (and put it into the cache)
  		var module = installedModules[moduleId] = {
  			i: moduleId,
  			l: false,
  			exports: {}
  		};
 
  		// Execute the module function
  		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
 
  		// Flag the module as loaded
  		module.l = true;
 
  		// Return the exports of the module
  		return module.exports;
  	}
 
 
  	// expose the modules object (__webpack_modules__)
  	__webpack_require__.m = modules;
 
  	// expose the module cache
  	__webpack_require__.c = installedModules;
 
  	// define getter function for harmony exports
  	__webpack_require__.d = function(exports, name, getter) {
  		if(!__webpack_require__.o(exports, name)) {
  			Object.defineProperty(exports, name, { enumerable: true, get: getter });
  		}
  	};
 
  	// 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 });
  	};
 
  	// create a fake namespace object
  	// mode & 1: value is a module id, require it
  	// mode & 2: merge all properties of value into the ns
  	// mode & 4: return value when already ns object
  	// mode & 8|1: behave like require
  	__webpack_require__.t = function(value, mode) {
  		if(mode & 1) value = __webpack_require__(value);
  		if(mode & 8) return value;
  		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
  		var ns = Object.create(null);
  		__webpack_require__.r(ns);
  		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
  		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
  		return ns;
  	};
 
  	// getDefaultExport function for compatibility with non-harmony modules
  	__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__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
 
  	// __webpack_public_path__
  	__webpack_require__.p = "";
 
 
  	// Load entry module and return exports
  	return __webpack_require__(__webpack_require__.s = "./src/index.js");
  })({
    "./src/bar.js":
    (function(module, __webpack_exports__, __webpack_require__) {
        "use strict";
        eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"default\", function() { return bar; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"foo\", function() { return foo; });\n\nfunction bar(){\n    return 'bar';\n}\nfunction foo() {\n    return 'foo';\n}\n\n\n\n//# sourceURL=webpack:///./src/bar.js?");
    }),
    "./src/index.js":
    (function(module, __webpack_exports__, __webpack_require__) {
        "use strict";
        eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _bar__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./bar */ \"./src/bar.js\");\n\n\n\nfunction fun() {\n    console.log(Object(_bar__WEBPACK_IMPORTED_MODULE_0__[\"default\"])())\n}\n\nfun();\n\n//# sourceURL=webpack:///./src/index.js?");
    })
});

分析

上一篇文章已经分析过了，webpack生成的代码是一个IIFE，这个IIFE完成一系列初始化工作后，就会通过__webpack_require__(webpack_require.s = "./src/index.js")启动入口模块

看看bar.js文件如何实现export的

__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "default", function() { return bar; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "foo", function() { return foo; });

function bar(){
    return 'bar';
}
function foo() {
    return 'foo';
}

__webpack_exports__.r作用就是给exports添加属性__esModule，值为true，用来标识是es模块

__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__.d作用给对象添加属性，注意这个会定义getter，当对象取值的时候调用

__webpack_require__.d = function(exports, name, getter) {
   	if(!__webpack_require__.o(exports, name)) {
   		Object.defineProperty(exports, name, { enumerable: true, get: getter });
   	}
};

如上给__webpack_exports__添加了default和foo属性，从实现了module.exports添加这两个属性。

打包后的index.js文件中

__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _bar__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./bar */ "./src/bar.js");

function fun() {
    console.log(Object(_bar__WEBPACK_IMPORTED_MODULE_0__["default"])())
}

fun();

使用__webpack_require__加载bar模块，得到结果赋值给_bar__WEBPACK_IMPORTED_MODULE_0__变量，通过这个变量得到default属性的值，即是bar模块中bar属性

commonjs与es6模块共存

如果以es6的方法导入commonjs模块，把bar.js文件变成如下

//bar.js
'use strict';
module.exports = function bar() {
    return 'bar';
}

打包后的inde.js

__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _bar__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./bar */ "./src/bar.js");
/* harmony import */ var _bar__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_bar__WEBPACK_IMPORTED_MODULE_0__);

function fun() {
    console.log(_bar__WEBPACK_IMPORTED_MODULE_0___default()())
}

fun();

加载bar模块后，多了一层__webpack_require__.n包装，定义一个getter方法返回，getter添加一个a属性，如果是es6模块用于获取module['default']，否则取module

__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;
};

将获取module的方法赋值给变量_bar__WEBPACK_IMPORTED_MODULE_0___default，调用它，得到bar模块，这个模块返回一个方法，所以_bar__WEBPACK_IMPORTED_MODULE_0___default()()，其实就是bar模块的bar()

如果在commonjs中引入es6模块，修改index.js如下

//index.js
'use strict';
const bar = require('./bar');
function fun() {
    console.log(bar.default())
}

fun();

打包后得到index.js

const bar = __webpack_require__(/*! ./bar */ "./src/bar.js");
function fun() {
    console.log(bar)
}

fun();

总结

webpack对于es模块的实现，也是基于自己实现的__webpack_require__ 和__webpack_exports__ ，装换成类似于commonjs的形式。对于es模块和commonjs混用的情况，则需要通过__webpack_require__.n的形式做一层包装来实现。

es6模块通过__webpack_require__.r方法添加标识符

参考链接

webpack模块化原理-ES module

avatar
文章
阅读
粉丝