Rollup 是 ESM 首选打包器，因其基于静态 import/export 分析依赖，精准合并与 Tree Shaking，支持多格式输出（es/cjs/umd），不注入运行时，产物干净；需插件解析裸包名和 CommonJS。

Rollup 是处理 ES Modules（ESM）最直接、最高效的打包工具之一，特别适合构建库、组件或 SDK。它不强行包裹代码，而是基于静态 import/export 分析依赖，做精准合并与剪枝，天然适配 ESM 语义。

为什么 Rollup 是 ESM 的首选打包器

浏览器虽支持原生 type="module"，但存在硬性限制：不能用裸包名（如 import { debounce } from 'lodash'）、路径必须带扩展名或以 ./ 开头、不解析 node_modules。Rollup 填补了这个 gap——它把 ESM 代码当作“可分析的图”，而不是运行时动态加载的对象。

• 只打包实际被引用的导出项，Tree Shaking 精准有效（比如 util.js 导出 add 和 multi，但只用了 add，multi 就不会进产物）
• 输出格式灵活：可同时生成 es（供现代 bundler 按需引入）、cjs（供 Node.js）、umd（供 script 标签全局使用）
• 不注入运行时模块系统，产物干净，接近手写 ESM 结构

基础配置：rollup.config.js 怎么写

一个最小可用配置只需定义入口、出口和格式：

Wjs Uploading Video

将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。

下载

export default {
  input: 'src/index.js',
  output: [
    { file: 'dist/index.es.js', format: 'es' },
    { file: 'dist/index.cjs.js', format: 'cjs' },
    { file: 'dist/index.umd.js', format: 'umd', name: 'MyLib' }
  ]
};

• input 是 ESM 入口，必须是相对路径（如 src/index.js），不能是包名
• output 支持数组，一次生成多格式；format: 'es' 输出纯 ESM，保留 import/export 语法
• name 仅在 umd 下需要，用于挂载到 window.MyLib 或 globalThis.MyLib

让第三方模块也能被正确处理

ESM 规范不支持直接 import 第三方包（如 import { debounce } from 'lodash'），Rollup 需靠插件补全能力：

• 安装插件：npm install -D @rollup/plugin-node-resolve @rollup/plugin-commonjs
• 在配置中启用：

  import resolve from '@rollup/plugin-node-resolve';
  import commonjs from '@rollup/plugin-commonjs';
  <p>export default {
  input: 'src/index.js',
  plugins: [resolve(), commonjs()],
  output: { /<em> ... </em>/ }
  };
  

• @rollup/plugin-node-resolve 解析 node_modules 中的包路径（把 lodash 映射到 node_modules/lodash/index.js）
• @rollup/plugin-commonjs 把 CommonJS 模块（如大多数 npm 包）转成 ESM，才能参与 Tree Shaking

配合 package.json 正确暴露不同格式

发布到 npm 后，其他项目要能按需引入，得靠 package.json 字段约定：

• "main": "dist/index.cjs.js" → CommonJS 环境（如旧版 Node.js）
• "module": "dist/index.es.js" → ESM 环境（Webpack/Vite 默认优先读这个）
• "exports": { ".": { "import": "./dist/index.es.js", "require": "./dist/index.cjs.js" } } → 更现代、更精确的条件导出（推荐）
• "types": "dist/index.d.ts"（如有 TypeScript 类型）→ 提供类型提示

这样，用户 import { foo } from 'my-lib' 时，Vite/webpack 会自动选 exports.import；而 require('my-lib') 则走 require 路径。