What is rollup-plugin-babel?
The rollup-plugin-babel package is a Rollup plugin that allows you to use Babel to transpile your JavaScript code. This is particularly useful for converting ES6+ code into a format that is compatible with older browsers or environments. The plugin integrates seamlessly with Rollup, making it easy to include Babel in your build process.
What are rollup-plugin-babel's main functionalities?
Transpile ES6+ Code
This feature allows you to transpile ES6+ code to ES5 using Babel. The code sample demonstrates how to set up Rollup with the Babel plugin to transpile code from the 'src/index.js' file and output it to 'dist/bundle.js'.
const babel = require('rollup-plugin-babel');
module.exports = {
input: 'src/index.js',
output: {
file: 'dist/bundle.js',
format: 'cjs'
},
plugins: [
babel({
exclude: 'node_modules/**'
})
]
};
Custom Babel Configuration
This feature allows you to use a custom Babel configuration. The code sample shows how to specify Babel presets and plugins directly within the Rollup configuration.
const babel = require('rollup-plugin-babel');
module.exports = {
input: 'src/index.js',
output: {
file: 'dist/bundle.js',
format: 'cjs'
},
plugins: [
babel({
presets: ['@babel/preset-env'],
plugins: ['@babel/plugin-transform-runtime']
})
]
};
Exclude Specific Files or Directories
This feature allows you to exclude specific files or directories from being transpiled by Babel. The code sample demonstrates how to exclude all files in the 'node_modules' directory.
const babel = require('rollup-plugin-babel');
module.exports = {
input: 'src/index.js',
output: {
file: 'dist/bundle.js',
format: 'cjs'
},
plugins: [
babel({
exclude: 'node_modules/**'
})
]
};
Other packages similar to rollup-plugin-babel
rollup-plugin-typescript2
The rollup-plugin-typescript2 package is a Rollup plugin that allows you to use TypeScript in your Rollup build process. It offers similar functionality to rollup-plugin-babel but is specifically designed for TypeScript. It also provides better caching and incremental compilation compared to other TypeScript Rollup plugins.
rollup-plugin-sucrase
The rollup-plugin-sucrase package is a Rollup plugin that uses Sucrase to transform your code. Sucrase is a faster alternative to Babel for transforming modern JavaScript syntax. While it doesn't support as many transformations as Babel, it can be a good choice for projects that need faster build times.
rollup-plugin-esbuild
The rollup-plugin-esbuild package is a Rollup plugin that uses esbuild to transpile JavaScript and TypeScript code. Esbuild is known for its speed and efficiency, making it a good alternative to Babel for projects that prioritize build performance.
rollup-plugin-babel
Seamless integration between Rollup and Babel.
Why?
If you're using Babel to transpile your ES6/7 code and Rollup to generate a standalone bundle, you have a couple of options:
- run the code through Babel first, being careful to exclude the module transformer, or
- run the code through Rollup first, and then pass it to Babel.
Both approaches have disadvantages – in the first case, on top of the additional configuration complexity, you may end up with Babel's helpers (like classCallCheck
) repeated throughout your code (once for each module where the helpers are used). In the second case, transpiling is likely to be slower, because transpiling a large bundle is much more work for Babel than transpiling a set of small files.
Either way, you have to worry about a place to put the intermediate files, and getting sourcemaps to behave becomes a royal pain.
Using Rollup with rollup-plugin-babel makes the process far easier.
Installation
npm install --save-dev rollup-plugin-babel
Usage
import { rollup } from 'rollup';
import babel from 'rollup-plugin-babel';
rollup({
entry: 'main.js',
plugins: [
babel({
exclude: 'node_modules/**'
})
]
}).then(...)
All options are as per the Babel documentation, except options.externalHelpers
(a boolean value indicating whether to bundle in the babel helpers), options.include
and options.exclude
(each a minimatch pattern, or array of minimatch patterns), which determine which files are transpiled by Babel (by default, all files are transpiled).
Babel will respect .babelrc
files – this is generally the best place to put your configuration.
External dependencies
Ideally, you should only be transforming your own source code, rather than running all of your external dependencies through Babel – hence the exclude: 'node_modules/**'
in the example above. If you have a dependency that exposes untranspiled ES6 source code that doesn't run in your target environment, then you may need to break this rule, but it often causes problems with unusual .babelrc
files or mismatched versions of Babel.
We encourage library authors not to distribute code that uses untranspiled ES6 features (other than modules) for this reason. Consumers of your library should not have to transpile your ES6 code, any more than they should have to transpile your CoffeeScript, ClojureScript or TypeScript.
Use babelrc: false
to prevent Babel from using local (i.e. to your external dependencies) .babelrc
files, relying instead on the configuration you pass in.
Configuring Babel
The following applies to Babel 6 only. If you're using Babel 5, do npm i -D rollup-plugin-babel@1
, as version 2 and above no longer supports Babel 5
tl;dr: use the es2015-rollup
preset instead of es2015
.
npm install --save-dev babel-preset-es2015-rollup
{
"presets": [ "es2015-rollup" ]
}
Modules
The es2015
preset includes the transform-es2015-modules-commonjs plugin, which converts ES6 modules to CommonJS – preventing Rollup from working. Instead, you should either use the es2015-rollup
preset, which excludes that plugin, or otherwise ensure that the modules-commonjs
plugin is excluded. Rollup will throw an error if this is incorrectly configured.
Helpers
In some cases Babel uses helpers to avoid repeating chunks of code – for example, if you use the class
keyword, it will use a classCallCheck
function to ensure that the class is instantiated correctly.
By default, those helpers will be inserted at the top of the file being transformed, which can lead to duplication. It's therefore recommended that you use the external-helpers
plugin, which is automatically included in the es2015-rollup
preset. Rollup will combine the helpers in a single block at the top of your bundle.
Alternatively, if you know what you're doing, you can use the transform-runtime
plugin. If you do this, use runtimeHelpers: true
:
rollup.rollup({
...,
plugins: [
babel({ runtimeHelpers: true })
]
}).then(...)
Finally, if you do not wish the babel helpers to be included in your bundle at all (but instead reference the global babelHelpers
object), you may set the externalHelpers
option to true
:
rollup.rollup({
...,
plugins: [
babel({
plugins: ['external-helpers-2'],
externalHelpers: true
})
]
}).then(...)
License
MIT