时间戳

首页 > 解决方案 > vue.js 的 CDN 和 ESM 构建是什么？

javascript - vue.js 的 CDN 和 ESM 构建是什么？

问题描述

鉴于使用的 vue.js（CDN- 或 ESM-）构建，Vue.js 文档说明了不同的语法。什么是 CDN 构建以及什么可以证明两种不同类型的构建具有不同的使用语法？

来自 vue.js 文档：

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

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

标签： javascriptvue.js

解决方案

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

ESM build 代表ES module你将在项目中安装并使用的包，这要归功于捆绑器（如 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 的，我d 说它几乎一直是后备和最糟糕的。有关更多信息，您可能应该在此处使用一些 google-fu，因为它超出了 Stackoverflow 的指南。

推荐阅读