　　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 是真的像！
不仅写法像，它们的作用也像：
（1）被声明 globals 的库，不会被打包到制品中
（2）被引用时会去浏览器的 window 上通过别名寻找
通过以上两个思路，可以成功解决组件内 只声明、不打包 的需求。
Original: https://www.cnblogs.com/goloving/p/16528196.html
Author: 古兰精
Title: 浅析前端依赖知识体系：依赖是什么（可执行代码与声明）、npm i 的依赖机制、node应用如何使用依赖（声明）、web应用的模块化导致依赖复杂、webpack如何把依赖打包（代码与声明）、组件开发如何更好的被依赖
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/547523/
转载文章受原作者版权保护。转载请注明原作者出处！