Vue构建版本理解

前言
提到 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