Vue2 dist 目錄下各個文件的區別

題圖 By Clm From Bing

vue2 dist文件夾中有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 個做用都用在什麼場景, 有什麼區別。

Vue項目按照構建方式分, 能夠分紅 完整構建 和 運行時構建。

按照規範分, 能夠分紅 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

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 同樣, 屬於壓縮後版本

總之記住一句話，完整構建時是可使用template選項的，而運行時構建是不可使用的，可是不論哪種，單文件組件均可以編譯爲組件。 UMD規範適用於瀏覽器直接引用，不用打包。CommonJS 和 ES Module規範都須要相似webpack和rollup之類的打包工具配合才能使用。

這裏留給你們一個思考題，在用vue-cli構建vue項目時，通常會有一個選項，以下：

這兩個選項有什麼不一樣呢？歡迎你們踊躍留言，答案下一篇文章揭曉。

本文分享自微信公衆號 - nodejs全棧開發（geekclass）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。