JavaScriptRollup配置_JavaScript模块打包方案

Rollup适合打包JavaScript模块因其支持Tree Shaking、输出多种模块格式并兼容ES6。它通过rollup.config.js配置入口与出口，结合resolve和commonjs等插件处理依赖，实现高效代码打包；多格式输出可同时生成es、cjs、umd文件，并通过package.json的main、module、browser字段指定对应入口，便于不同环境按需引入，提升构建效率与兼容性。

JavaScript模块打包是现代前端开发中的关键环节，尤其在需要发布轻量级、高性能库时，Rollup 是一个非常合适的选择。相比 Webpack 更侧重应用打包，Rollup 专注于将多个模块编译成一个简洁高效的 JavaScript 文件，特别适合构建 NPM 库或工具包。

为什么选择 Rollup 打包 JavaScript 模块？

Rollup 使用 ES6 模块语法（import / export）进行静态分析，能实现“Tree Shaking”——自动剔除未使用的代码，从而输出更小的打包结果。它生成的代码更接近原生 ES 模块结构，便于其他项目按需引入。

常见使用场景包括：

• 开发通用工具库（如 Lodash 风格的函数集合）
• 构建 UI 组件库（如 Button、Modal 等可独立引入的模块）
• 发布到 NPM 的 SDK 或插件系统

基础配置文件 rollup.config.js

Rollup 的核心是配置文件 rollup.config.js，它导出一个配置对象，定义输入输出及插件。

立即学习“Java免费学习笔记（深入）”；

一个典型的基础配置如下：

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'umd',
    name: 'MyLibrary'
  }
};

说明：

• input：入口文件路径
• output.file：输出文件位置
• output.format：输出格式，常见有：
  • es：ES 模块（推荐用于现代项目）
  • cjs：CommonJS（Node.js 兼容）
  • umd：通用模块定义（兼容 AMD、CommonJS 和全局变量）
• name：UMD 模式下挂载到全局的变量名（如 window.MyLibrary）

常用插件扩展功能

Rollup 原生只支持 ES 模块，实际项目中常需借助插件处理其他资源或语法。

安装插件：

北极象沉浸式AI翻译

免费的北极象沉浸式AI翻译 - 带您走进沉浸式AI的双语对照体验

24

查看详情

npm install --save-dev @rollup/plugin-node-resolve @rollup/plugin-commonjs

更新配置：

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'umd'
  },
  plugins: [
    resolve(), // 支持从 node_modules 中导入模块
    commonjs() // 将 CommonJS 模块转换为 ES6
  ]
};

其他实用插件：

• @rollup/plugin-babel：支持 JSX、TypeScript 或新语法
• rollup-plugin-terser：压缩输出代码
• @rollup/plugin-typescript：直接编译 TypeScript

多格式输出与 package.json 配置

为了兼容不同环境，通常同时输出多种格式。

配置数组形式支持多目标输出：

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

然后在 package.json 中指定主入口：

{
  "main": "dist/mylib.cjs.js",
  "module": "dist/mylib.es.js",
  "browser": "dist/mylib.umd.js"
}

这样构建工具（如 Webpack）会优先读取 module 字段以启用 Tree Shaking。

基本上就这些。Rollup 配置简单清晰，适合专注模块化输出的场景，搭配插件生态可满足大多数库的打包需求。不复杂但容易忽略细节，比如输出格式选择和插件顺序。

以上就是JavaScriptRollup配置_JavaScript模块打包方案的详细内容，更多请关注php中文网其它相关文章！