一、背景
vue工程中，父组件想要使用子组件就需要通过import的方式引入子组件并在components选项中进行注册，import xxx from 'xxxx.vue'是vue工程中最常用的语法之一了，但是可能很少有人想过，在import vue文件时，背后到底是如何处理的。
今天我们就来瞧一瞧，import vue文件时背后的处理历程。
二、webpack 的loader机制
我们知道原生import是无法import vue文件的，那么为什么我们在代码中可以使用呢？
这是因为webpack的loader机制，通过配置文件类型对应的loader，可以使用指定的loader对文件先进行一次处理，再交给原生的import语法去处理。那么我们的vue文件对应的loader就是vue-loader啦。
我们可以通过webpack的配置来确认这一点：
// 项目中的webpack配置
module: {
rules: [
// 匹配到vue文件，就使用vue-loader处理
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
}]
}
三、vue-loader处理vue文件
前面已经知道，vue文件在import时会经过vue-loader处理，那么vue-loader是如何处理的呢？
这里，我们首先看一下vue-loader处理完的结果是怎么样的。
为了看到vue-loader的处理结果，需要我们修改node_modules中vue-loader的代码，将处理结果打印出来：
// vue-loader-13.7.3版本
// vue-loader\lib\loader.js
// line 447,添加console.log，打印输出
console.log('vue-loader output =>',output)
return output
修改完成之后，需要重新启动工程，然后在vscode 的控制台就可以看到打印的结果了
// vue-loader处理import App from 'App.vue'的结果
function injectStyle (ssrContext) {
if (disposed) return
require("!!vue-style-loader!css-loader?{\"sourceMap\":true}!../node_modules/vue-loader/lib/style-compiler/index?{\"vue\":true,\"id\":\"data-v-7ba5bd90\",\"scoped\":false,\"hasInlineConfig\":false}!../node_modules/vue-loader/lib/selector?type=styles&index=0!./App.vue")
}
var normalizeComponent = require("!../node_modules/vue-loader/lib/component-normalizer")
/* script */
export * from "!!babel-loader!../node_modules/vue-loader/lib/selector?type=script&index=0!./App.vue"
import __vue_script__ from "!!babel-loader!../node_modules/vue-loader/lib/selector?type=script&index=0!./App.vue"
/* template */
import __vue_template__ from "!!../node_modules/vue-loader/lib/template-compiler/index?{\"id\":\"data-v-7ba5bd90\",\"hasScoped\":false,\"transformToRequire\":{\"video\":[\"src\",\"poster\"],\"source\":\"src\",\"img\":\"src\",\"image\":\"xlink:href\"},\"buble\":{\"transforms\":{}}}!../node_modules/vue-loader/lib/selector?type=template&index=0!./App.vue"
/* template functional */
var __vue_template_functional__ = false
/* styles */
var __vue_styles__ = injectStyle
/* scopeId */
var __vue_scopeId__ = null
/* moduleIdentifier (server only) */
var __vue_module_identifier__ = null
var Component = normalizeComponent(
__vue_script__,
__vue_template__,
__vue_template_functional__,
__vue_styles__,
__vue_scopeId__,
__vue_module_identifier__
)
Component.options.__file = "src/App.vue"
export default Component.exports
可以看到vue-loader的输出是一段js代码，这段js代码会被原生import所执行。
通过浏览这段js代码，大致可以看出：首先按照vue文件的三个部分分别进行处理，即template部分、script部分和style部分，然后使用component-normalizer.js中的normalizeComponent方法进行汇总处理。
接下来我们先来看vue文件的三个部分是如何处理的。
3.1 template部分
先看template部分的处理代码
// vue-loader输出结果中处理template部分的代码
import __vue_template__ from "!!../node_modules/vue-loader/lib/template-compiler/index?{\"id\":\"data-v-7ba5bd90\",\"hasScoped\":false,\"transformToRequire\":{\"video\":[\"src\",\"poster\"],\"source\":\"src\",\"img\":\"src\",\"image\":\"xlink:href\"},\"buble\":{\"transforms\":{}}}!../node_modules/vue-loader/lib/selector?type=template&index=0!./App.vue"
这行代码看起来有点长，可以拆分成两段解析：
// 第一段
!!../node_modules/vue-loader/lib/template-compiler/index?{\"id\":\"data-v-7ba5bd90\",\"hasScoped\":false,\"transformToRequire\":{\"video\":[\"src\",\"poster\"],\"source\":\"src\",\"img\":\"src\",\"image\":\"xlink:href\"},\"buble\":{\"transforms\":{}}}
//第二段
!../node_modules/vue-loader/lib/selector?type=template&index=0!./App.vue
第二段代码是使用vue-loader/lib/selector.js来处理App.vue文件，那么这个selector.js是干啥的呢，看一下vue-loader/lib/selector.js文件中的注释
// vue-loader/lib/selector.js 注释
// this is a utility loader that takes a *.vue file, parses it and returns
// the requested language block, e.g. the content inside <template>, for
// further processing.
selector.js中的注释说明了，这个方法是用于从vue文件中读取对应标签中的内容，因此第二段代码的处理结果就是读取App.vue中template标签中的代码。
再看第一段代码，虽然看起来还是有点长，但是可以看出来是调用vue-loader/lib/template-compiler/index.js来处理，剩下的部分是处理的参数。
那么vue-loader/lib/template-compiler/index.js是做什么的呢，实际上就是进行模板编译的，通过引入vue-template-compiler这个包进行编译，而vue-template-compiler就是从vue源码生成的，所以vue-loader中的模板编译和vue源码中的模板编译是一致的。经过模板编译后，输出的结果就是渲染函数。可以通过打印结果的方式来确认：
// vue-loader 处理App.vue的template部分输出结果
var render = function() {
var _vm = this
var _h = _vm.$createElement
var _c = _vm._self._c || _h
return _c("div", { attrs: { id: "app" } }, [_c("HelloWorld")], 1)
}
var staticRenderFns = []
render._withStripped = true
var esExports = { render: render, staticRenderFns: staticRenderFns }
export default esExports
if (module.hot) {
module.hot.accept()
if (module.hot.data) {
require("vue-hot-reload-api") .rerender("data-v-7ba5bd90", esExports)
}
}
3.2：script部分
接下来看一下script部分的处理：
// vue-loader输出结果中处理script部分的代码
import __vue_script__ from "!!babel-loader!../node_modules/vue-loader/lib/selector?type=script&index=0!./App.vue
这行代码看起来比较短，但是也是有2段处理的
//第一段
!!babel-loader
//第二段
!../node_modules/vue-loader/lib/selector?type=script&index=0!./App.vue
第二段与template中的处理一致，只是这里取的是script部分的代码
第一段是用babel-loader对取到的script部分代码进行处理
script部分的处理很清晰，就是用babel处理vue文件中script标签内的代码，可以在component-normalizer.js中打断点查看结果
3.3：style部分
接着看style部分的处理
// vue-loader输出结果中处理style部分的代码
function injectStyle (ssrContext) {
if (disposed) return
require("!!vue-style-loader!css-loader?{\"sourceMap\":true}!../node_modules/vue-loader/lib/style-compiler/index?{\"vue\":true,\"id\":\"data-v-7ba5bd90\",\"scoped\":false,\"hasInlineConfig\":false}!../node_modules/vue-loader/lib/selector?type=styles&index=0!./App.vue")
}
与template和script不同的是，style部分是定义了一个处理函数injectStyle，在此函数中进行style部分处理，函数的调用时机后面再分析
这里先看一下函数中是如何处理style标签内的代码的，分成三段处理
//第一段
!!vue-style-loader
//第二段
!css-loader?{\"sourceMap\":true}!../node_modules/vue-loader/lib/style-compiler/index?{\"vue\":true,\"id\":\"data-v-7ba5bd90\",\"scoped\":false,\"hasInlineConfig\":false}
//第三段
!../node_modules/vue-loader/lib/selector?type=styles&index=0!./App.vue"
第三段与template中的处理一致，只是这里取的是style部分的代码
第二段是用css-loader对取到的style部分代码进行处理
第一段是用vue-style-loader对css-loader处理过的代码再进行处理
3.4：normalizeComponent函数处理
分析了vue-loader对vue文件中三个部分的处理后，normalizeComponent相当于是对三部分的处理做综合性的处理。
// vue-loader源码 lib\component-normalizer.js
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
}
}
看一下经过normalizeComponent的处理后的App.vue的exports
这个就是import vue文件时最终导入的对象，相比于前面看到的script部分的输出：
- 多了render和staticRenderFns属性，这个是从template部分的编译结果中取得的;
- 还多了一个beforeCreate钩子属性，其值是一个数组，包含了injectStyle函数，当组件实例化时，触发beforeCreate钩子，injectStyle被执行，组件样式进而生效。
四、总结
当我们import vue文件时，会触发webpack的loader机制，使用vue-loader对vue文件进行处理，vue-loader将vue按照标签分成分template、script、style三部处理：template部分引入vue-template-compiler进行模板编译，输出渲染函数；script部分通过babel-loader进行编译，生成浏览器可直接运行的代码；style部分没有直接处理，而是定义了一个处理函数，处理函数中先用css-loader处理，再用vue-style-loader进行处理；最后再使用normalizeComponent方法对三部分进行综合性处理，输出最终的结果。
