vue dist中问什么有那么多版本？runtime是什么？

初看源码看到vue 源码中dist文件下有很多个版本的vue的时候，我们可能会一头雾水，为什么会有这么多版本？他们都是干啥的有什么区别？

|-dist
    |-- vue.js
    |-- vue.common.js
    |-- vue.esm.js
    |-- vue.runtime.js
    |-- vue.runtime.common.js
    |-- vue.runtime.esm.js
    |-- vue.min.js
    |-- vue.runtime.min.js

我们仔细观察会发现，其实也就几大类，一种压缩过的，一种未压缩的，common版的，esm版的，runtime版的,官方对这些类型解释如下

	UMD	CommonJS	ES Module
Full(完整版)	vue.js	vue.common.js	vue.esm.js
Runtime-only（运行版）	vue.runtime.js	vue.runtime.common.js	vue.runtime.esm.js
Full (production)	vue.min.js
Runtime-only (production)	vue.runtime.min.js

带.min的这个不用多说大家都知道，这个是压缩版本，那 umd，commonjs 和EM module分别是啥？
做过插件的同学对这个比较熟悉，这三种分别是前端模块化的三种模式，

• umd是用过模块规范是我们最熟悉的方式，通过script标签引入插件，插件一般通过全局变量的形式引入，挂载到window上。
• commonJS 是nodejs 采用的最早的模块标准，通过module.exports导出，require("moduleName")导入，
• EM Module ES6推出的模块化标准,通过 export语法导出 import xxx from 'module' 导入

具体可看上一篇文章 前端模块化（ CommonJS、AMD、CMD、UMD、ES Module） 详解

那么就剩最后一个runtime了？官方介绍runtime版本是运行时版本，不包含vue的模板编译器，因为现在大部分vue开发都使用vue 全家桶，而解析模板的任务就交给 vue-loader 在项目build的时候就解析成了render函数的形式，所以不需要编译器。vue pageage.json 中默认导出的就是vue.runtime.common.js 版本。

我们书写vue 模板无非有三种方式：

第一种前端vue工程中，使用vue-loader解析模板，所以引入runtime版就可以了

//xxx.vue文件内
<templte> 
    <input v-model="value">
</template>
<script>
<script>
export default {
  name: 'app',
  data(){
      return {value:1}
  }
}
</script>

第二种,利用script标签申明模板内容， 常用于cdn引入模式,这种模式由于需要解析模板，所以需要引入完整版的vue，如果引入的是不是完整版页面会报错"runtime-only版本的没有compiler解析器"

//xxx.html
<script type="text/x-template" id="my-template">
  <input v-model="value">
</script>
Vue.component('my-component',{
    template:"#my-template"
})

第三种,render函数，由于书写不太优化这种我们平时使用很少，多用于地层组件优化，在vue中前两种模板最终都会解析成render函数的形式执行，不需要解析模板，所以runtime版本就可以了

Vue.component('my-component', {
    props: ['value'],
    //javascript 函数式模板
    render: function (createElement) {
      var self = this
      return createElement('input', {
        domProps: {
          value: self.value
        },
        on: {
          input: function (event) {
            self.$emit('input', event.target.value)
          }
        }
      })
    }
})

通过修改vue-cli 或者 webpack的配置我们可以指定引入哪个版本的vue，
vue.confing.js 中设置 runtimeCompiler改用完整版，webpack中配置参数

module.exports={
    //省略...
    resolve:{
        alias:{
            'vue':'vue/dist/vue.js'
        }
    }
    ...
}

然后再页面正常引入就可以了

import vue from 'vue'