理順8個版本vue的區分

一共8個版本的vue

• 一共8個vue版本,都是用在什麼狀況下的?
• 默許會用的哪一個vue版本,vue-cli里用的哪一個版本?
• 怎樣指定運用哪一個版本的vue?

不急,從2個維度去明白這8個版本。

• 依據是不是須要編譯器分為: 運行時版本 和 完整版
• 依據這個vue代碼用在什麼地方: 分為UMD / CommonJS / ES Module

【運行時版本】和【完整版】的區分: 用不用編譯?

完整版: 包含編譯器和運行時的版本
編譯器: vue里用的<template></template>語法是須要被編譯的
運行時: 用來建立Vue實例、襯着、處置懲罰假造Dom,能夠明白為除了編譯器剩下的代碼都屬於運行時

假如你須要運用template的語法,就須要編譯器,那末就要運用完整版

用了.vue文件的大多數狀況下,你能夠用運行時版本

當你運用vue-loader或vueify的時刻, *.vue文件內部會預編譯成JS,所以你在終究打好的包里,
實際上是不須要編譯器的,所以這類狀況,應該用運行時版本,畢竟運行時版本的體積比完整版要小30%

假如我肯定要用完整版的呢? 怎樣挑選版本呢?

你須要在webpack里設置alias

module.exports = {
  // ...
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js' // 用 webpack 1 時需用 'vue/dist/vue.common.js'
    }
  }
}

UMD / CommonJS / ES Module 的區分: 你的vue用在什麼地方?

• 當你經由過程script標籤來援用vue源碼時,用UMD版本
• 當你經由過程低版本的打包東西,比方webpack1,用CommonJS版本
• 當你經由過程當代打包東西比方 webpack 2 或 Rollup,用ES Module版本

其他

vue源碼會依據process.env.NODE_ENV來推斷是用臨盆照樣開闢環境的代碼

webpack里能夠有自帶的 new webpack.DefinePlugin()來設置process.env.NODE_ENV

相似如許

   new webpack.DefinePlugin({
      'process.env': env
    }),