前言
提到 Vue 的构建版本，对 Vue 初学者而言，很多人都是似懂非懂。官文对于 构建版本的解释放在了，前言局部，以表格的模式对其进行介绍，官文跳转

图解构建版本

如图

  • 完整版：同时蕴含 编译器 和 运行时 的版本

    • 编译器：用来将模板字符串编译成为 JavaScript 渲染函数的代码，体积大、效率低
    • 运行时：用来创立 Vue 实例、渲染并解决虚构 DOM 等的代码，体积小、效率高。能够解释为不蕴含编译器的版本。（编译器源码3000+lines）
  • UMD：UMD 版本通用的模块版本，反对多种模块形式。 vue.js 默认文件就是运行时 + 编译器的UMD 版本
  • CommonJS(cjs)：CommonJS 版本用来配合老的打包工具比方 Browserify 或webpack1。

  • ES Module：从 2.6 开始 Vue 会提供两个 ES Modules (ESM) 构建文件，为古代打包工具提供的版本。

    • ESM 格局被设计为能够被动态剖析（在编译时解决解析模块依赖而不是运行时），所以打包工具能够利用这一点来进行“tree-shaking”并将用不到的代码排除出最终的包。
    • ES6 模块与 CommonJS 模块的差别
<div id="app">  Hello World</div><script src="vue.runtime.js"></script>  // 运行时UMD版本,会报错,无奈编译template模板<script>  new Vue({    el:"#app",    template:'<h1>{{ msg }}</h1>',    data:{      msg:"HelloVue"    }  })</script>

vue-cli中默认导入 vue.runtime.esm.js

  • 查看vue-cli 创立的我的项目的 vue导入版本

    • yarn global add @vue/cli （vuecli目前最新4.5）
    • vue create xxx (用cli创立时选Vue2)
    • 生成的我的项目中cli 对 webpack进行了封装，导致我的项目中看不到 main.js 下的
    • 咱们写的 import Vue from 'vue' 是从哪里引入的
    • 通过命令行工具 vue inspect 查看配置文件,发现vue默认应用 esm运行时版本的vue
// 操作方法，生成output文件vue inspect > output.js