浅谈webpack编译vue项目生成的代码探索(3)
0号模块
导出一个全局变量,在web端就是指代window
/* 0 */ (function (module, exports) { var g; // This works in non-strict mode g = (function () { return this; })(); try { // This works if eval is allowed (see CSP) g = g || Function("return this")() || (1, eval)("this"); } catch (e) { // This works if the window reference is available if (typeof window === "object") g = window; } // g can still be undefined, but nothing to do about it... // We return undefined, instead of nothing here, so it's // easier to handle this case. if(!global) { ...} module.exports = g; /***/ }),
1号模块
实际上做的事情很明显,就是导出了 main.js 的代码,一个vue实例对象
/* 1 */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; Object.defineProperty(__webpack_exports__, "__esModule", { value: true }); /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_vue__ = __webpack_require__(2); /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__App_vue__ = __webpack_require__(6); // 从2号模块导出的一个叫a的变量,就是Vue对象本身 new __WEBPACK_IMPORTED_MODULE_0_vue__["a" /* default */]({ el: '#app', template: '<App/>', components: { App: __WEBPACK_IMPORTED_MODULE_1__App_vue__["a" /* default */] } }); /***/ })
2号模块
即是 Vue 源码本身,从114行一直到了10818行,一共是10705行代码,啧啧啧
webpack 有所配置,所以导出的 Vue 实际上是 vue/dist/vue.esm.js 的完整编译版本。
/* 2 */ /***/ (function (module, __webpack_exports__, __webpack_require__) { "use strict"; /*! * Vue.js v2.5.9 * (c) 2014-2017 Evan You * Released under the MIT License. */ // 作用域指向__webpack_exports__,并把__webpack_require__(0)作为global,实际上就是window // __webpack_require__(3).setImmediate)作为setsetImmediate参数传入函数 (function (global, setImmediate) { // 省略近1w行的代码,关于vue原本本身的解读以后再做...... // 最终 export 出来一个叫 Vue$3的对象 /* harmony default export */ __webpack_exports__["a"] = (Vue$3); /* WEBPACK VAR INJECTION */ }.call(__webpack_exports__, __webpack_require__(0), __webpack_require__(3).setImmediate)) }),
3,4,5号模块
都和 node_modules/setimmediate 有关,由于 vue 的 DOM 异步更新机制使用到了它,所以被引入。
这里也不做详解,只给出结构。
/* 3 */ /***/ (function (module, exports, __webpack_require__) { // 省略代码... // setimmediate attaches itself to the global object __webpack_require__(4); exports.setImmediate = setImmediate; exports.clearImmediate = clearImmediate; /***/ }), /* 4 */ /***/ (function (module, exports, __webpack_require__) { /* WEBPACK VAR INJECTION */ (function (global, process) { // 省略代码... }.call(exports, __webpack_require__(0), __webpack_require__(5))) /***/ }), /* 5 */ /***/ (function (module, exports) { // shim for using process in browser var process = module.exports = {}; // 省略代码... process.cwd = function () { return '/' }; process.chdir = function (dir) { throw new Error('process.chdir is not supported'); }; process.umask = function () { return 0; }; /***/ }),
内容版权声明:除非注明,否则皆为本站原创文章。