浅谈webpack编译vue项目生成的代码探索(5)
12、13、14号模块
12号做 .vue 文件中的 template 和 script 解析并供6号输出,最终返回了一个 vue components 对象,在浏览器控制台打印如下:
Object beforeCreate: [ƒ] data: ƒ data() inject: {} name: "app" render: ƒ () staticRenderFns: (2) [ƒ, ƒ, cached: Array(2)] _Ctor: {0: ƒ} _compiled: true __proto__: Object
而13号模块返回具体 script 中的代码,而14号模块则是把 template 解析为一堆 vue render 函数。
/* 12 */ /***/ (function (module, exports) { /* globals __VUE_SSR_CONTEXT__ */ // IMPORTANT: Do NOT use ES2015 features in this file. // This module is a runtime utility for cleaner component module output and will // be included in the final webpack user bundle. module.exports = function normalizeComponent( rawScriptExports, compiledTemplate, functionalTemplate, injectStyles, scopeId, moduleIdentifier /* server only */ ) { var esModule var scriptExports = rawScriptExports = rawScriptExports || {} // ES6 modules interop var type = typeof rawScriptExports.default if (type === 'object' || type === 'function') { esModule = rawScriptExports scriptExports = rawScriptExports.default } // Vue.extend constructor export interop var options = typeof scriptExports === 'function' ? scriptExports.options : scriptExports // render functions if (compiledTemplate) { options.render = compiledTemplate.render options.staticRenderFns = compiledTemplate.staticRenderFns options._compiled = true } // functional template if (functionalTemplate) { options.functional = true } // scopedId if (scopeId) { options._scopeId = scopeId } var hook if (moduleIdentifier) { // server build hook = function (context) { // 2.3 injection context = context || // cached call (this.$vnode && this.$vnode.ssrContext) || // stateful (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext) // functional // 2.2 with runInNewContext: true if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') { context = __VUE_SSR_CONTEXT__ } // inject component styles if (injectStyles) { injectStyles.call(this, context) } // register component module identifier for async chunk inferrence if (context && context._registeredComponents) { context._registeredComponents.add(moduleIdentifier) } } // used by ssr in case component is cached and beforeCreate // never gets called options._ssrRegister = hook } else if (injectStyles) { hook = injectStyles } if (hook) { var functional = options.functional var existing = functional ? options.render : options.beforeCreate if (!functional) { // inject component registration as beforeCreate hook options.beforeCreate = existing ? [].concat(existing, hook) : [hook] } else { // for template-only hot-reload because in that case the render fn doesn't // go through the normalizer options._injectStyles = hook // register for functioal component in vue file options.render = function renderWithStyleInjection(h, context) { hook.call(context) return existing(h, context) } } } return { esModule: esModule, exports: scriptExports, options: options } } /***/ }), /* 13 */ /***/ (function (module, __webpack_exports__, __webpack_require__) { "use strict"; /* harmony default export */ // 这就是 App.vue 中 script 的部分 __webpack_exports__["a"] = ({ name: 'app', data: function data() { return { msg: 'Welcome to Your Vue.js App' }; } }); /***/ }), /* 14 */ /***/ (function (module, __webpack_exports__, __webpack_require__) { "use strict"; // 把template 解析为一堆 render 函数,扔给vue处理最终编译成Vnode节点在渲染成DOM输出到视图 var render = function () { var _vm = this; var _h = _vm.$createElement; var _c = _vm._self._c || _h; return _c('div', { attrs: { "id": "app" } }, [_c('h1', [_vm._v(_vm._s(_vm.msg))]), _vm._v(" "), _c('h2', [_vm._v("Essential Links")]), _vm._v(" "), _vm._m(0, false, false), _vm._v(" "), _c('h2', [_vm._v("Ecosystem")]), _vm._v(" "), _vm._m(1, false, false)]) } var staticRenderFns = [function () { var _vm = this; var _h = _vm.$createElement; var _c = _vm._self._c || _h; return _c('ul', [_c('li', [_c('a', { attrs: { "href": "https://vuejs.org", "target": "_blank" } }, [_vm._v("Core Docs")])]), _vm._v(" "), _c('li', [_c('a', { attrs: { "href": "https://forum.vuejs.org", "target": "_blank" } }, [_vm._v("Forum")])]), _vm._v(" "), _c('li', [_c('a', { attrs: { "href": "https://chat.vuejs.org", "target": "_blank" } }, [_vm._v("Community Chat")])]), _vm._v(" "), _c('li', [_c('a', { attrs: { "href": "https://twitter.com/vuejs", "target": "_blank" } }, [_vm._v("Twitter")])])]) }, function () { var _vm = this; var _h = _vm.$createElement; var _c = _vm._self._c || _h; return _c('ul', [_c('li', [_c('a', { attrs: { "href": "http://router.vuejs.org/", "target": "_blank" } }, [_vm._v("vue-router")])]), _vm._v(" "), _c('li', [_c('a', { attrs: { "href": "http://vuex.vuejs.org/", "target": "_blank" } }, [_vm._v("vuex")])]), _vm._v(" "), _c('li', [_c('a', { attrs: { "href": "http://vue-loader.vuejs.org/", "target": "_blank" } }, [_vm._v("vue-loader")])]), _vm._v(" "), _c('li', [_c('a', { attrs: { "href": "https://github.com/vuejs/awesome-vue", "target": "_blank" } }, [_vm._v("awesome-vue")])])]) }] var esExports = { render: render, staticRenderFns: staticRenderFns } /* harmony default export */ __webpack_exports__["a"] = (esExports); /***/ })
内容版权声明:除非注明,否则皆为本站原创文章。