JS 中怎么用 rollup 或打包工具处理 ES Modules-js教程-PHP中文网

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

js 中怎么用 rollup 或打包工具处理 es modules

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>/ }
};
</p>

@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 路径。