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 aka的缩写，您将在项目中安装这个包，并使用它(比如Webpack)，并像这样使用它：import coolMethod from 'nice-package'

它可以说，您通常可以对两个导入执行相同的操作，但是CDN通常会更有限/更难定制/更难优化。所以，如果你可以使用ESM一号，那就去做吧。

这篇有趣的文章比较了CJS、AMD、UMD和ESM变体：https://dev.to/iggredible/what-the-heck-are-cjs-amd-umd-and-esm-ikm。

至于CDN，我想说的是，它几乎一直都是退步和最糟糕的。要了解更多信息，您可能应该在这里使用一些google，因为它超出了Stackoverflow的指导原则。