Babel transforms modern JavaScript to compatible versions using plugins (individual transforms) and presets (plugin collections). Configure via babel.config.js with presets like @babel/preset-env for automatic browser targeting and plugins for specific features.
Babel Pipeline:
Configuration:
presets: Collections of pluginsplugins: Individual transformstargets: Browser/Node targetsenv: Environment-specific configCommon Presets:
Key Concepts:
// babel.config.js
module.exports = {
presets: [
['@babel/preset-env', {
// Target browsers
targets: {
browsers: ['>0.25%', 'not dead'],
// Or use browserslist in package.json
},
// Polyfill configuration
useBuiltIns: 'usage', // Auto-inject needed polyfills
corejs: 3,
// Module output
modules: false, // Keep ES modules for tree shaking
}],
['@babel/preset-react', {
runtime: 'automatic', // React 17+ JSX transform
}],
'@babel/preset-typescript',
],
plugins: [
// Decorators (Stage 3)
['@babel/plugin-proposal-decorators', { legacy: true }],
// Class properties
'@babel/plugin-proposal-class-properties',
// Optional chaining (if not in preset-env targets)
'@babel/plugin-proposal-optional-chaining',
],
env: {
test: {
presets: [
['@babel/preset-env', { targets: { node: 'current' } }],
],
},
production: {
plugins: [
'transform-remove-console',
],
},
},
};