0
# Output Plugin
1

2
The output plugin transforms generated chunks after Rollup has completed its bundling process. This is the only way to transform Rollup's auto-generated wrapper code and is useful for applying compatibility transformations to the final output.
3

4
## Capabilities
5

6
### Output Plugin Function
7

8
Creates a plugin for transforming output chunks during the renderChunk phase.
9

10
```javascript { .api }
11
/**
12
 * Creates a Babel plugin for transforming output chunks
13
 * @param options - Plugin options for output transformation
14
 * @returns Plugin instance for output transformation
15
 */
16
function getBabelOutputPlugin(options?: RollupBabelOutputPluginOptions): Plugin;
17
```
18

19
**Usage Examples:**
20

21
```javascript
22
import { getBabelOutputPlugin } from '@rollup/plugin-babel';
23

24
// Basic output transformation
25
export default {
26
  input: 'main.js',
27
  plugins: [
28
    getBabelOutputPlugin({
29
      presets: ['@babel/preset-env']
30
    })
31
  ],
32
  output: [
33
    { file: 'bundle.cjs.js', format: 'cjs' },
34
    { file: 'bundle.es.js', format: 'es' }
35
  ]
36
};
37

38
// Applied to specific outputs only
39
export default {
40
  input: 'main.js',
41
  output: [
42
    { file: 'bundle.js', format: 'es' },
43
    {
44
      file: 'bundle.es5.js',
45
      format: 'es',
46
      plugins: [getBabelOutputPlugin({ presets: ['@babel/preset-env'] })]
47
    }
48
  ]
49
};
50
```
51

52
### Configuration Options
53

54
Configuration interface for output plugin.
55

56
```javascript { .api }
57
interface RollupBabelOutputPluginOptions extends Omit<BabelTransformOptions, 'include' | 'exclude'> {
58
  /**
59
   * Allow formats other than ES modules or CommonJS
60
   * @default false
61
   */
62
  allowAllFormats?: boolean;
63
}
64
```
65

66
**Usage Examples:**
67

68
### Format Compatibility
69

70
Working with different output formats:
71

72
```javascript
73
// Recommended: Use ES format and let Babel handle module transformation
74
export default {
75
  input: 'main.js',
76
  output: {
77
    file: 'bundle.umd.js',
78
    format: 'es' // Keep as ES, let Babel transform
79
  },
80
  plugins: [
81
    getBabelOutputPlugin({
82
      presets: [['@babel/preset-env', { modules: 'umd' }]]
83
    })
84
  ]
85
};
86

87
// Alternative: Allow all formats (less safe)
88
export default {
89
  input: 'main.js',
90
  output: {
91
    file: 'bundle.iife.js',
92
    format: 'iife'
93
  },
94
  plugins: [
95
    getBabelOutputPlugin({
96
      allowAllFormats: true,
97
      presets: ['@babel/preset-env']
98
    })
99
  ]
100
};
101
```
102

103
### Babel Configuration Files
104

105
Output plugin doesn't automatically search for Babel config files:
106

107
```javascript
108
import path from 'path';
109

110
getBabelOutputPlugin({
111
  configFile: path.resolve(__dirname, 'babel.config.js'),
112
  presets: ['@babel/preset-env']
113
});
114
```
115

116
### Runtime Helpers
117

118
Using runtime helpers with output transformation:
119

120
```javascript
121
// For ES modules
122
getBabelOutputPlugin({
123
  presets: ['@babel/preset-env'],
124
  plugins: [['@babel/plugin-transform-runtime', { useESModules: true }]]
125
});
126

127
// For CommonJS
128
getBabelOutputPlugin({
129
  presets: ['@babel/preset-env'],
130
  plugins: [['@babel/plugin-transform-runtime', { useESModules: false }]]
131
});
132
```
133

134
### Combined Input and Output Processing
135

136
Using both input and output plugins together:
137

138
```javascript
139
import { babel, getBabelOutputPlugin } from '@rollup/plugin-babel';
140

141
export default {
142
  input: 'main.js',
143
  plugins: [
144
    // Transform special syntax during input
145
    babel({ presets: ['@babel/preset-react'] })
146
  ],
147
  output: {
148
    file: 'bundle.js',
149
    format: 'es',
150
    plugins: [
151
      // Transform for compatibility during output
152
      getBabelOutputPlugin({ presets: ['@babel/preset-env'] })
153
    ]
154
  }
155
};
156
```
157

158
### Output Plugin Limitations
159

160
Important constraints and considerations:
161

162
```javascript
163
// These options are ignored and will produce warnings
164
getBabelOutputPlugin({
165
  include: '**/*.js',     // ⚠️ Ignored
166
  exclude: 'node_modules/**', // ⚠️ Ignored
167
  extensions: ['.js'],    // ⚠️ Ignored
168
  presets: ['@babel/preset-env']
169
});
170

171
// Format restrictions (without allowAllFormats)
172
getBabelOutputPlugin({
173
  // Only 'es' and 'cjs' formats are allowed by default
174
  presets: ['@babel/preset-env']
175
});
176
```
177

178
## Plugin Hooks
179

180
The output plugin implements specific Rollup hooks:
181

182
```javascript { .api }
183
interface OutputPlugin {
184
  name: 'babel';
185
  renderStart?(outputOptions: OutputOptions): void;
186
  renderChunk?(code: string, chunk: RenderedChunk, outputOptions: OutputOptions): TransformResult | null;
187
}
188

189
interface OutputOptions {
190
  format: 'es' | 'cjs' | 'amd' | 'iife' | 'umd' | 'system';
191
  // ... other output options
192
}
193

194
interface RenderedChunk {
195
  fileName: string;
196
  isEntry: boolean;
197
  isDynamicEntry: boolean;
198
  // ... other chunk properties
199
}
200

201
// From @babel/core
202
interface BabelTransformOptions {
203
  filename?: string;
204
  filenameRelative?: string;
205
  presets?: any[];
206
  plugins?: any[];
207
  sourceMaps?: boolean;
208
  sourceType?: 'script' | 'module' | 'unambiguous';
209
  // ... other Babel options
210
}
211

212
interface TransformResult {
213
  code: string;
214
  map?: SourceMap;
215
}
216

217
interface SourceMap {
218
  version: number;
219
  sources: string[];
220
  names: string[];
221
  mappings: string;
222
  file?: string;
223
  sourcesContent?: string[];
224
}
225
```