解析Vue2 dist 目录下各个文件的区别


Posted in Javascript onNovember 22, 2017

vue2 经过 2.2 版本升级后, 文件变成了 8 个:

  1. vue.common.js
  2. vue.esm.js
  3. vue.js
  4. vue.min.js
  5. vue.runtime.common.js
  6. vue.runtime.esm.js
  7. vue.runtime.js
  8. vue.runtime.min.js

瞬间就懵逼了, 这些文件该怎么选?

下面就来说下, 这 8 个作用都用在什么场景, 有什么区别

按照构建方式分, 可以分成 完整构建(包含独立构建和运行时构建) 和 运行时构建

按照规范分, 可以分成 UMD, CommonJS 和 ES Module

简单来说, 完整构建 和 运行时构建的区别就是, 可不可以用template选项, 和文件大一点,小一点

vue.common.js

属于: 基于 CommonJS 的完整构建

可以用于 Webpack-1 和 Browserify 之类打包工具

因为是完整构建, 所以可以使用template选项, 如:

import Vue from 'vue'
new Vue({
 template: `
  <div id="app">
   <h1>Basic</h1>
  </div>
 `
}).$mount('#app')

注意: 用 webpack-1 之类打包工具时, 使用该版本, 需要配置别名, 以 webpack 为例:

{
 resolve: {
  alias: {
   'vue$': 'vue/dist/vue.common.js'
  }
 }
}

vue.esm.js

属于: 基于 ES Module 的完整构建

可以用于 Webpack-2 和 rollup 之类打包工具

因为是完整构建, 所以可以使用template选项, 如:

import Vue from 'vue'
new Vue({
 template: `
  <div id="app">
   <h1>Basic</h1>
  </div>
 `
}).$mount('#app')

注意: 用 webpack-2 之类打包工具时, 使用该版本, 需要配置别名, 以 webpack 为例:

{
 resolve: {
  alias: {
   'vue$': 'vue.esm.js'
  }
 }
}

vue.js

属于: 基于 UMD 的完整构建

可以用于直接 CDN 引用

因为是完整构建, 所以可以使用template选项, 如:

<script src="https://unkpg.com/vue/dist/vue.js"></script>
<script>
new Vue({
 template: `
  <div id="app">
   <h1>Hi Vue</h1>
  </div>
 `
}).$mount('#app')
</script>

vue.min.js

和 vue.js 一样, 属于压缩后版本

vue.runtime.common.js

属于: 基于 CommonJS 的运行时构建

可以用于 Webpack-1 和 Browserify 之类打包工具

运行时构建不包含模板编译器,因此不支持template选项,只能用render选项,但即使使用运行时构建,在单文件组件中也依然可以写模板,因为单文件组件的模板会在构建时预编译为render函数, render函数的使用, 请参考: http://cn.vuejs.org/v2/guide/render-function.html

import Vue from 'vue'
new Vue({
 render: function(h){
  return h('h1', 'Hi Vue')
 }
}).$mount('#app')

vue.runtime.esm.js

属于: 基于 ES Module 的运行时构建

可以用于 Webpack-2 和 rollup 之类打包工具

运行时构建不包含模板编译器,因此不支持template选项,只能用render选项,但即使使用运行时构建,在单文件组件中也依然可以写模板,因为单文件组件的模板会在构建时预编译为render函数, render函数的使用, 请参考: http://cn.vuejs.org/v2/guide/render-function.html

import Vue from 'vue'
new Vue({
 render: function(h){
  return h('h1', 'Hi Vue')
 }
}).$mount('#app')

vue.runtime.js

属于: 基于 UMD 的运行时构建

可以用于直接 CDN 引用

该版本和vue.js类似, 可以用于直接 CDN 引用, 因为不包含编译器, 所以不能使用template选项, 只能使用render函数

<script src="https://unkpg.com/vue/dist/vue.runtime.js"></script>
<script>
new Vue({
 render: function(h){
  return h('h1', 'Hi Vue')
 }
}).$mount('#app')
</script>

vue.runtime.min.js

和 vue.runtime.js 一样, 属于压缩后版本

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS面向对象、prototype、call()、apply()
May 14 Javascript
js 创建快捷方式的代码(fso)
Nov 19 Javascript
基于jQuery的倒计时实现代码
May 30 Javascript
javascript在IE下trim函数无法使用的解决方法
Sep 12 Javascript
js实现图片和链接文字同步切换特效的方法
Feb 20 Javascript
简单实现jQuery进度条轮播实例代码
Jun 20 Javascript
vue.js实现简单轮播图效果
Oct 10 Javascript
ui-router中使用ocLazyLoad和resolve的具体方法
Oct 18 Javascript
vue和webpack安装命令详解
Jun 15 Javascript
Angular2 自定义表单验证器的实现方法
Dec 14 Javascript
通过实例了解Javascript柯里化流程
Mar 03 Javascript
微信小程序换肤功能实现代码(思路详解)
Aug 25 Javascript
浅谈Vuex@2.3.0 中的 state 支持函数申明
Nov 22 #Javascript
echarts学习笔记之图表自适应问题详解
Nov 22 #Javascript
arcgis for js栅格图层叠加(Raster Layer)问题
Nov 22 #Javascript
在vue中添加Echarts图表的基本使用教程
Nov 22 #Javascript
ActiveX控件的使用-js实现打印超市小票功能代码详解
Nov 22 #Javascript
前端必备插件之纯原生JS的瀑布流插件Macy.js
Nov 22 #Javascript
vue.js模仿京东省市区三级联动的选择组件实例代码
Nov 22 #Javascript
You might like
如何对PHP程序中的常见漏洞进行攻击(上)
2006/10/09 PHP
windows服务器中检测PHP SSL是否开启以及开启SSL的方法
2014/04/25 PHP
ThinkPHP之A方法实例讲解
2014/06/20 PHP
PHP+Mysql树型结构(无限分类)数据库设计的2种方式实例
2014/07/15 PHP
PHP的Laravel框架中使用AdminLTE模板来编写网站后台界面
2016/03/21 PHP
Yii2超好用的日期和时间组件(值得收藏)
2016/05/05 PHP
php操作redis常见方法示例【key与value操作】
2020/04/14 PHP
CSS+JS构建的图片查看器
2006/07/22 Javascript
javascript框架设计读书笔记之种子模块
2014/12/02 Javascript
JS实现页面超时后自动跳转到登陆页面
2015/01/19 Javascript
JavaScript代码因逗号不规范导致IE不兼容的问题
2016/02/25 Javascript
简单实现Vue的observer和watcher
2016/12/21 Javascript
js实现简单的网页换肤效果
2017/01/18 Javascript
vue实现的双向数据绑定操作示例
2018/12/04 Javascript
微信小程序实现同一页面取值的方法分析
2019/04/30 Javascript
JS this关键字在ajax中使用出现问题解决方案
2020/07/17 Javascript
JavaScript实现雪花飘落效果
2020/12/27 Javascript
[02:25]DOTA2英雄基础教程 生死判决瘟疫法师
2013/12/06 DOTA
[38:32]DOTA2上海特级锦标赛A组资格赛#2 Secret VS EHOME第二局
2016/02/26 DOTA
Python爬豆瓣电影实例
2018/02/23 Python
Python爬虫实现的根据分类爬取豆瓣电影信息功能示例
2019/09/15 Python
Python高级编程之消息队列(Queue)与进程池(Pool)实例详解
2019/11/01 Python
Python字典fromkeys()方法使用代码实例
2020/07/20 Python
Python基于callable函数检测对象是否可被调用
2020/10/16 Python
pandas map(),apply(),applymap()区别解析
2021/02/24 Python
英国最大的汽车交易网站:Auto Trader UK
2016/09/23 全球购物
Linux内核的同步机制是什么?主要有哪几种内核锁
2013/01/03 面试题
《这儿真好》教学反思
2014/02/22 职场文书
小区文明倡议书
2014/05/16 职场文书
会计电算化专业求职信
2014/06/10 职场文书
海洋科学专业求职信
2014/08/10 职场文书
纪念九一八事变演讲稿:忘记意味着背叛
2014/09/14 职场文书
解除劳动合同证明书
2014/09/26 职场文书
医院岗前培训心得体会
2016/01/08 职场文书
2019班干部竞选演讲稿范本!
2019/07/08 职场文书
方法汇总:Python 安装第三方库常用
2022/04/26 Python