Learn the concept
Transpilation with Babel & SWC
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',
],
},
},
};Configuring Babel with `@babel/preset-env` to transpile modern JavaScript syntax (ES2020+) down to ES5 based on browser compatibility targets, and using `core-js` with `useBuiltIns: 'usage'` for efficient polyfilling of new JavaScript features.
Combining `@babel/preset-typescript` and `@babel/preset-react` in Babel's configuration to handle both TypeScript compilation and JSX transformation, alongside plugins for Stage 3 ECMAScript proposals like optional chaining or nullish coalescing.
Using environment-specific Babel configurations (e.g., `env.production`) to apply plugins like `transform-remove-console` or custom plugins that inline constant values, reducing bundle size and improving runtime performance.
Create a simple JavaScript project using modern ESNext features. Configure Babel with `@babel/preset-env` to transpile the code for a target browser (e.g., IE11), demonstrating how to ensure compatibility with older environments.
Develop a custom Babel plugin that identifies and replaces calls to a specific logging function with another (e.g., changing `log.info` to `console.log`), showcasing how to create custom code transformations.
Meta extensively uses Babel for transforming its JavaScript code, especially with React and Flow (their static type checker). They leverage Babel's plugin architecture to support experimental features, optimize code for different environments, and maintain their large-scale applications.
Next.js relies on Babel for JavaScript transpilation, enabling developers to use the latest ECMAScript features and TypeScript. Its configurations are optimized for fast development and efficient production builds, supporting features like fast refresh and server-side rendering.