浅谈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;
};
/***/
}),
内容版权声明:除非注明,否则皆为本站原创文章。
