乐趣区

关于vue.js:Vue构建版本理解

jiezi

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

退出移动版