.vue文件编译成浏览器可执行文件的流程详解
作者：九殇
vue2官网 其中”安装”介绍了关于Vue的各种版本。
- 编译器：用来将模板字符串编译成为 JavaScript 渲染函数的代码。
<div id="app">
<div>{{ a }}</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script> <script>
const vm = new Vue({ el: '#app', data: { a: 'hello world', }, })
</script>以上是一段简单的Vue2代码, 打开浏览器可以正确显示出 “hello world”,- 可以发现 <div>{{ a }}</div> 不是浏览器支持的语法. 所以实际上能显示 hello world, 并不是由以上模板代码直接在浏览器执行的结果, 而是通过”编译器”编译, 再由浏览器执行
- 接下来用代码为大家演示Vue2是如何将上面代码编译的
- 首先必须引入”完整版”,
- 打开页面, 在控制台可以发现方法: Vue.compile
- 将刚才的 template 代码放到编译方法里执行, 结果如下
- 可以看到 template 被编译成 JavaScript,_c,_v,_s,是vue实例vm上一些方法的简称
- 编译结果可以翻译成
<script>
const vm = new Vue({
el: '#app',
name: 'App',
data: () => ({
a: 'hello world!!!',
}),
render() {
const {_c, _v, _s, a} = this
//return createElement('div', [createTextNode(toString(a))])
return _c('div',[_v(_s(a))])
}
})
</script>这样 模板template就被编译为了 render函数
- 以上便是在 .html 文件中使用template 开发, 由 Vue2完整版 进行编译的过程
.vue文件是如何进行编译的?
通常项目中是使用Webpack打包, 再由浏览器引入这些js, css等文件, 那么Webpack是如何对.vue文件进行编译的?
1. .vue文件
.vue文件，.vue 文件是一个自定义的文件类型，用类 HTML 语法描述一个 Vue 组件。每个 .vue 文件包含三种类型的顶级语言块 <template>、<script> 和 <style>，还允许添加可选的自定义块.
2. vue-loader
vue-loader 会解析文件，提取每个语言块，如有必要会通过其它 loader 处理，最后将他们组装成一个 ES Module，它的默认导出是一个 Vue.js 组件选项的对象。
接下来通过vue-loader的源码来了解是如何实现编译的
vue文件分为 template, script, style 三个部分, 而实际必须通过编译才能在浏览器执行的部分只有template, 所以我们在看 vue-loader 源码时可以重点关注 “template” 关键词
descriptor.template 如上图所示, 在源码搜索 template 关键字可以找到这段处理 script, template, style 的代码, 仔细观察发现这三段都在用 descriptor 对象, 接下来搜索 descriptor, 找到这个变量在哪里生成的 descriptor
再来找 parse 方法
compiler.ts compiler.ts
parse 方法从 vue/compiler-sfc 中引用
至此, 了解到 vue-loader 是通过 @vue/compiler-sfc 的 parse 方法解析 .vue 文件, 从中解析出script, template, style
用一段nodejs代码进行验证
// App.vue
<template>
<div id="app">
<div>{{ a }}</div>
<input type="text" v-model="a">
</div>
</template>
<script>
export default {
name: 'App',
data: () => ({
a: 'hello world'
}),
}
</script>// build.js
const { parse } = require('@vue/compiler-sfc')
const fs = require('fs')
const data = fs.readFileSync('./App.vue')
const { descriptor } = parse(data.toString())
// 结果包含很多项, 本文档中只展示重点字段
console.log(Object.keys(descriptor))运行 build.js
[ 'styles', 'template', 'script', // ... ]
通过以上代码可以解析出 .vue 文件的三部分, 接下来开始解析 template vue-template-compiler vue-template-compiler 可以将 template 编译成 Javascript
- 继续修改 build.js, 根据文档加上 compile 的部分
// build.js
const { parse } = require('@vue/compiler-sfc')
const fs = require('fs')
const compiler = require('vue-template-compiler')
const data = fs.readFileSync('./App.vue')
const { descriptor } = parse(data.toString())
// console.log(Object.keys(descriptor))
console.log(compiler.compile(descriptor.template.content).render)- 运行结果如下
with(this){
return _c(
'div',
{attrs:{"id":"app"}},
[
_c('div',[_v(_s(a))]),
_v(" "),
_c(
'input',
{
directives:[{name:"model",rawName:"v-model",value:(a),expression:"a"}],
attrs:{"type":"text"},
domProps:{"value":(a)},
on:{
"input": function($event){
if($event.target.composing) return;
a=$event.target.value
}
}
}
)
]
)
}再将以上代码放到 .html 的 new Vue(...) 方法中进行验证
<div id="app"/>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
const vm = new Vue({
name: 'App',
data: () => ({
a: 'hello world!!!',
}),
render() {
const {_c, _v, _s, a} = this
return _c(
'div',
{attrs: {'id': 'app'}},
[
_c('div', [_v(_s(a))]),
_v(' '),
_c(
'input',
{
directives: [{name: 'model', rawName: 'v-model', value: (a), expression: 'a'}],
attrs: {'type': 'text'},
domProps: {'value': (a)},
on: {
// 注意这里的 this, 需要改成箭头函数
'input': ($event) => {
if ($event.target.composing) return
this.a = $event.target.value
},
},
},
),
],
)
},
}).$mount('#app')
</script>以上便是 Webpack 如何将 .vue 文件编译成浏览器可执行文件的过程
到此这篇关于.vue文件编译成浏览器可执行文件的流程详解的文章就介绍到这了,更多相关.vue文件编译成可执行文件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！