在 vue 工程中，安装依赖时，需要 vue 和 vue-template-compiler 版本必须保持一致，否则会报错。
Module build failed: Error: Cannot find module ‘vue-template-compiler’
为什么二者版本必须一致呢？vue-template-compiler 承担哪些作用？其和 vue-loader 又有何关联？
vue-template-compiler
作用： 该模块可用于将 Vue 2.0 模板预编译为渲染函数（template => ast => render），以避免运行时编译开销和 CSP 限制。大都数场景下，与 vue-loader一起使用，只有在编写具有非常特定需求的构建工具时，才需要单独使用它
内容安全策略 (CSP) 是一个附加的安全层，用于帮助检测和缓解某些类型的攻击，包括跨站脚本 (XSS) 和数据注入等攻击。
需要注意的是，This package is auto-generated. For pull requests please see src/platforms/web/entry-compiler.js. – 这个包是自动生成的，请查看 entry-compiler.js 文件。
其文件路径，vue/src/platforms/web/entry-compiler.js
代码语言：javascript复制export { parseComponent } from 'sfc/parser'
export { compile, compileToFunctions } from './compiler/index'
export { ssrCompile, ssrCompileToFunctions } from './server/compiler'
export { generateCodeFrame } from 'compiler/codeframe'可得知，vue-template-compiler 的代码是从 vue 源码中抽离的！接着，我们对比一下 vue-template-compiler 和 vue 关于编译的 API。发现对于 compile 等函数是一致，只是 vue-template-compiler 开放的参数和方法更多。因此，vue 和 vue-template-compiler 的版本必须一致（同一份源码）！
const compiler = require('vue-template-compiler')
const result = compiler.compile(`
This is my vue render test
my name is {{myName}}
`
)
console.log(result)compiler.compile(template, [options])
代码语言：javascript复制{
ast: ASTElement, // 解析模板生成的ast
render: string, // 渲染函数
staticRenderFns: Array<string>, // 静态子树
errors: Array<string>,
tips: Array<string>
}{
ast: {
type: 1,
tag: 'div',
attrsList: [ [Object] ],
attrsMap: { id: 'test' },
rawAttrsMap: {},
parent: undefined,
children: [ [Object], [Object], [Object] ],
plain: false,
attrs: [ [Object] ],
static: false,
staticRoot: false
},
render: `with(this){return _c('div',{attrs:{"id":"test"}},[
_m(0), // 上述提到的静态子树，索引为0 This is my vue render test
_v(" "), // 空白节点 之间的换行内容
_c('p',[_v("my name is " _s(myName))]) // my name is {{myName}}
])}`,
staticRenderFns: [
`with(this){return _c('div',[_c('p',[_v("This is my vue render test")])])}`
],
errors: [],
tips: []
}需要注意的是：children 存在3个节点，其中第二个为空节点 { type: 3, text: ' ', static: true } 即代码中的
之间的内容。
compiler.compileToFunctions(template)
简化版的 compiler.compile() ，但只返回
{
render: Function,
staticRenderFns: Array<Function>
}其通过 new Function() 方式
compiler.parseComponent(file, [options])
将 SFC （单文件组件或* .vue文件）解析为描述符「以下述提供SFC为例」
代码语言：javascript复制{
template: {
type: 'template',
content: 'n{{ msg }}n',
start: 10,
attrs: {},
end: 54
},
script: {
type: 'script',
content: 'n'
'export default {n'
' data () {n'
' return {n'
" msg: 'Hello world!'n"
' }n'
' }n'
'}n',
start: 77,
attrs: {},
end: 174
},
styles: [
{
type: 'style',
content: 'n.example {n color: red;n}n',
start: 194,
attrs: {},
end: 236
}
],
customBlocks: [
{
type: 'custom1',
content: '自定义块',
start: 257,
attrs: {},
end: 261
}
],
errors: []
}通常用于 SFC 构建工具，如 vue-loader、vueify等
compiler.generateCodeFrame(template, start, end)
高亮展示 start，end 代码段。
代码语言：javascript复制compiler.generateCodeFrame(`上述代码`, 15, 20)
1 | <template>
2 | <div class="example">{{ msg }}</div>
| ^^^^^
3 | </template>简介解析过程
入口文件 src/compiller/index.js
// 生成ast语法树
const ast = parse(template.trim(), options)
// 标记静态内容（以免diff的时候需要重复比较）
optimize(ast, options)
// 生成 render function code
const code = generate(ast, options)vue-loader
webpack loader for Vue Single-File Components. 用于 Vue 单文件组件的 webpack 加载器。
Vue Single-File Components
*.vue 文件是一种自定义文件格式，使用类似于 HTML 的语法来描述 Vue 组件。每个 *.vue 文件都包含三种类型的顶级语言块：
