六、vite/rollup怎么把依赖打包？
vite 构建的核心工具是 rollup.js。同样的，rollup 也是个打包器。它也不得不面对 webpack 面对的那两个问题：（1）怎么打包 一堆代码（2）怎么打包 一个声明
1、vite/rollup怎么处理一堆代码？
相比于 webpack 所设计的复杂的 chunk、module 等加载体系，rollup 显然纯粹的多，它默认只提供了 6种文件输出结构。而 vite 在这一点上显然更加激进，它最低以 es2015 作为自己的兼容标准，也就是构建输出的乃是 ESM 模块。
参考 vite 官网的描述：https://cn.vitejs.dev/guide/build.html#browser-compatibility
因而，在兼容性上，vite 比 webpack 要弱，带来的好处也是显而易见的：
制品结构清晰、不冗余、体积小。
好理解（ESM），不用去学 webpackJsonp 是啥了。
当然，官方也给出了更低版本浏览器兼容的法门，按需要使用吧。
2、vite/rollup怎么处理一个声明？
vite 没有直接提供类似加载 CDN 依赖的配置。但社区提供了类似的插件，比如： vite-plugin-cdn-import。
而 rollup，如果你的目标构建格式是 umd，那么它的 globals 配置，正是用来处理这个问题的。
七、从组件开发思考：如何更好地被依赖
上面两节我们从 webpack、vite 大致了解了 web 应用构建过程中对依赖的处理。那么，当我们开发组件时，要怎么做才能更好地扮演自己作为 被依赖者 的角色呢？
1、组件应该输出什么格式？
大多数情况下：ESM、UMD 就够了，如果你的组件需要在 node.js 环境运行，那可能还需要加上 CommonJS 格式。
按照本文之前的说法，两种格式分别应对两种场景：
ESM: 作为 一堆代码 被引用。
UMD: 作为 一个声明 的实际支撑，被用作 CDN 引入页面。
因为 rollup.js/vite 默认支持输出 ESM、UMD，所以 rollup/vite 实在是开发组件的利器。
值得一提的是，rollup.js 默认行为会把所有的模块打包到一个 js 文件里，这行为显然不符合当下 按需加载 的思路。
因此，通过 preserveModules: true 配置选项，可以让 rollup 只编译，不打包，输出完美的散装 esm 文件格式。
2、在组件内如何 只声明、不打包 ？
这是组件开发者永远无法绕开的问题，因为你必须想清楚。你开发 Element Plus，不可能内置一套 vue3 吧？按照本文【第二节】的描述，作为一个组件，你应该正确地 声明自己的依赖
（1）输出 ESM：通过 rollup external 配置和 package.json dependencies
rollup 的 external，和 webpack 的 externals 的作用类似，但存在差异。
rollup external 的作用是：指定部分依赖不打包到制品中，但是在代码中保留 import xxx from 'bar' 这样的语句。为了配合这个语法，我们应该把实际依赖声明到 package.json 的 dependencies 中。
这样当其他应用依赖组件时，会按照【本文第二节】的内容进行安装，并从 node_modules 中去寻找依赖。
（2）输出 UMD：通过 rollup output.globals 配置。
rollup 的 output.globals，和 webpack 的 externals 是真的像！
// 这是webpack的externals
module.exports = {
//...
externals: {
jquery: 'jQuery',
},
};
// 这是rollup的globals
export default {
output: {
globals: {
jquery: 'jQuery'
}
}
};
不仅写法像，它们的作用也像：
（1）被声明 globals 的库，不会被打包到制品中
（2）被引用时会去浏览器的 window 上通过别名寻找
通过以上两个思路，可以成功解决组件内 只声明、不打包 的需求。
八、总结
通过上面的总结，我们对 前端依赖 有了一个 较为体系的认识 。不妨试试回答这几个问题：
1、什么是依赖？是一堆代码，还是一个声明？
2、semver 是什么？
3、npm install 时，是怎么处理不同版本号的？都安装在哪？
4、dependencies 和 devDependencies 在表现上有什么本质区别？
5、为什么 web 端的依赖更加复杂？
6、webpack 和 vite 在制品格式上有啥区别？都是怎么处理依赖的？
7、开发组件时应该如何正确处理依赖？
最后声明一个原则：复杂的问题简单化、简单的问题体系化。
学习文章：《拿来吧您！把“前端依赖”纳入知识体系》- https://juejin.cn/post/7124102653407297550