vue.js 的 CDN 和 ESM 版本是什么？

Question

Vue.js 文檔說明了使用 vue.js（CDN- 或 ESM-）構建的不同語法。 什么是 CDN 構建以及什么可以證明兩種不同類型的構建具有不同的使用語法？

來自 vue.js 文檔：

// CDN build of Vue
const { KeepAlive, Teleport, Transition, TransitionGroup } = Vue

// ESM build of Vue
import { KeepAlive, Teleport, Transition, TransitionGroup } from 'vue'

Answer 1

CDN基本上是您以老式方式導入腳本： <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>

ESM build 代表ES module又名 package，您將在項目中安裝並使用捆綁器（如 Webpack）並像這樣使用它： import coolMethod from 'nice-package'

可以說，您通常可以對兩種導入執行相同的操作，但 CDN 通常會受到更多限制/不太可定制/不太可優化。 因此，如果您可以使用 ESM 之一，go。

這篇有趣的文章比較了 CJS、AMD、UMD 和 ESM 變體： https://dev.to/iggredible/what-the-heck-are-cjs-amd-umd-and-esm-ikm
至於CDN，我想說它幾乎一直是后備和最糟糕的。 有關更多信息，您可能應該在此處使用一些 google-fu，因為它超出了 Stackoverflow 的指南。