理順8個版本vue的區別

理順8個版本vue的區別

一共8個版本的vue

clipboard.png

  • 一共8個vue版本,都是用在什麼狀況下的?
  • 默認會用的哪一個vue版本,vue-cli裏用的哪一個版本?
  • 如何指定使用哪一個版本的vue?

不急,從2個維度去理解這8個版本。vue

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

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

完整版: 包括編譯器和運行時的版本
編譯器: vue裏用的<template></template>語法是須要被編譯的
運行時: 用來建立Vue實例、渲染、處理虛擬Dom,能夠理解爲除了編譯器剩下的代碼都屬於運行時

若是你須要使用template的語法,就須要編譯器,那麼就要使用完整版webpack

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

當你使用vue-loader或vueify的時候, *.vue文件內部會預編譯成JS,因此你在最終打好的包裏,
其實是不須要編譯器的,因此這種狀況,應該用運行時版本,畢竟運行時版本的體積比完整版要小30%web

若是我必定要用完整版的呢? 如何選擇版本呢?

你須要在webpack裏配置aliasvue-cli

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工具

相似這樣spa

new webpack.DefinePlugin({
      'process.env': env
    }),
相關文章
相關標籤/搜索