@babel/core

Babel compiler core.

weekly downloads97.8M

versionv7.29.0

licenseMIT

categorytoolchain

6to5babelclassesconstes6harmonyletmodulestranspiletranspilervarbabel-corecompiler

Overview

@babel/core is the foundational module of the Babel JavaScript compiler, providing the transform API that converts modern ECMAScript 2015+ syntax into backward-compatible JavaScript for older browsers and environments. It processes code through a three-stage pipeline: parsing source code into an Abstract Syntax Tree (AST) using babel-parser, transforming the AST through a configurable plugin system, and generating output code with source maps via babel-generator.

The package exists to solve the compatibility problem between JavaScript's rapid evolution and browser support timelines. While TC39 regularly approves new language features, production applications must support environments that may be years behind the latest specification. Babel bridges this gap by allowing developers to write modern JavaScript with features like optional chaining, async/await, and class fields while maintaining compatibility with IE11, Node.js 12, or any target environment.

With over 97 million weekly downloads, @babel/core powers the build pipelines of virtually every major JavaScript framework and toolchain. React, Vue, Angular, Next.js, and Create React App all depend on Babel for JSX transformation and syntax transpilation. It's the de facto standard in the JavaScript ecosystem for production-grade code transformation, offering unmatched flexibility through its 100+ plugins and ecosystem integrations with Webpack, Rollup, Parcel, and other bundlers.

The package operates as a low-level API that other tools build upon. Most developers interact with it through @babel/cli for command-line usage, babel-loader for Webpack integration, or framework-specific configurations. It requires separate presets like @babel/preset-env to determine which transformations to apply based on target environments, making it highly modular but requiring configuration knowledge for optimal use.

Quick Start

typescript

const babel = require('@babel/core');
const fs = require('fs');

// Source code with modern JavaScript features
const sourceCode = `
const greet = (name = 'World') => {
  const message = \`Hello, \${name}!\`;
  return message?.toUpperCase() ?? 'NO MESSAGE';
};

class User {
  #privateField = 42;
  
  async fetchData() {
    const response = await fetch('/api/user');
    return response?.json();
  }
}
`;

// Transform with specific presets and plugins
const result = babel.transformSync(sourceCode, {
  presets: [
    ['@babel/preset-env', {
      targets: {
        browsers: ['ie 11', 'last 2 versions']
      },
      useBuiltIns: 'usage',
      corejs: 3
    }]
  ],
  plugins: [
    '@babel/plugin-proposal-class-properties',
    '@babel/plugin-proposal-private-methods'
  ],
  sourceMaps: true,
  filename: 'example.js'
});

console.log('Transformed code:');
console.log(result.code);
console.log('\nSource map:', result.map);

// Transform a file asynchronously
babel.transformFileAsync('./src/input.js', {
  presets: ['@babel/preset-env']
}).then(output => {
  fs.writeFileSync('./dist/output.js', output.code);
  fs.writeFileSync('./dist/output.js.map', JSON.stringify(output.map));
}).catch(err => console.error('Transform failed:', err));

Use Cases

Transpiling React/JSX applications: Transform JSX syntax and modern JavaScript features for browser compatibility in React projects. @babel/core with @babel/preset-react converts JSX tags into React.createElement calls while simultaneously downleveling ES2015+ syntax for older browsers.

Targeting specific browser versions: Use @babel/preset-env with browserslist configuration to automatically select only necessary transformations. This reduces bundle size by avoiding unnecessary polyfills for modern browsers while maintaining compatibility for legacy targets like IE11 or Safari 12.

Framework and library authoring: Compile published npm packages to maximize compatibility across Node.js versions and bundler configurations. Libraries like Lodash, Moment.js alternatives, and utility packages use Babel to output ES5 code with optional ESM/CJS builds.

Custom code transformations and codemods: Write Babel plugins to enforce code style conventions, migrate deprecated APIs, or optimize patterns automatically. Teams use this for large-scale refactoring tasks like upgrading prop-types usage or replacing legacy import statements.

Experimental JavaScript features: Safely use Stage 2/3 TC39 proposals in production by transforming experimental syntax like the pipeline operator or decorators. This enables early adoption of features before native browser support while maintaining a clear upgrade path when features stabilize.

Pros & Cons

Pros

+Highly extensible plugin architecture with 100+ official plugins for granular control over transformations and the largest ecosystem of community plugins
+Specification-compliant transformations that closely follow ECMAScript standards with comprehensive test suites ensuring output correctness
+Seamless integration with all major build tools (Webpack, Rollup, Parcel, Vite) and framework toolchains through well-maintained loaders and adapters
+Source map generation enables accurate debugging of transpiled code, preserving line numbers and variable names in browser DevTools
+Flexible configuration through presets like @babel/preset-env with browserslist support for automatic transformation selection based on target environments

Cons

−Significantly slower than Rust-based alternatives like SWC or Go-based esbuild, often 10-20x slower for large codebases which impacts development server startup times
−Complex configuration surface with many options, presets, and plugin ordering requirements that can be difficult for newcomers to optimize correctly
−Requires separate polyfill management (core-js) which adds configuration overhead and potential for runtime errors if polyfills aren't loaded correctly
−Large dependency tree with many sub-packages increases node_modules size and installation time compared to monolithic alternatives
−Performance overhead in watch mode for incremental builds, though cache plugins can mitigate this with additional configuration

Alternatives

esbuildv0.27.3

An extremely fast JavaScript and CSS bundler and minifier.

build-tool

105.3M / week

typescriptv5.9.3

TypeScript is a language for application scale JavaScript development

toolchainTypeScriptMicrosoft

116.8M / week

Install

bash

npm install @babel/core

bash

pnpm add @babel/core

bash

bun add @babel/core

Overview

Quick Start

typescript

const babel = require('@babel/core');
const fs = require('fs');

// Source code with modern JavaScript features
const sourceCode = `
const greet = (name = 'World') => {
  const message = \`Hello, \${name}!\`;
  return message?.toUpperCase() ?? 'NO MESSAGE';
};

class User {
  #privateField = 42;
  
  async fetchData() {
    const response = await fetch('/api/user');
    return response?.json();
  }
}
`;

// Transform with specific presets and plugins
const result = babel.transformSync(sourceCode, {
  presets: [
    ['@babel/preset-env', {
      targets: {
        browsers: ['ie 11', 'last 2 versions']
      },
      useBuiltIns: 'usage',
      corejs: 3
    }]
  ],
  plugins: [
    '@babel/plugin-proposal-class-properties',
    '@babel/plugin-proposal-private-methods'
  ],
  sourceMaps: true,
  filename: 'example.js'
});

console.log('Transformed code:');
console.log(result.code);
console.log('\nSource map:', result.map);

// Transform a file asynchronously
babel.transformFileAsync('./src/input.js', {
  presets: ['@babel/preset-env']
}).then(output => {
  fs.writeFileSync('./dist/output.js', output.code);
  fs.writeFileSync('./dist/output.js.map', JSON.stringify(output.map));
}).catch(err => console.error('Transform failed:', err));

Use Cases

Pros & Cons

Pros

+Highly extensible plugin architecture with 100+ official plugins for granular control over transformations and the largest ecosystem of community plugins
+Specification-compliant transformations that closely follow ECMAScript standards with comprehensive test suites ensuring output correctness
+Seamless integration with all major build tools (Webpack, Rollup, Parcel, Vite) and framework toolchains through well-maintained loaders and adapters
+Source map generation enables accurate debugging of transpiled code, preserving line numbers and variable names in browser DevTools
+Flexible configuration through presets like @babel/preset-env with browserslist support for automatic transformation selection based on target environments

Cons

−Significantly slower than Rust-based alternatives like SWC or Go-based esbuild, often 10-20x slower for large codebases which impacts development server startup times
−Complex configuration surface with many options, presets, and plugin ordering requirements that can be difficult for newcomers to optimize correctly
−Requires separate polyfill management (core-js) which adds configuration overhead and potential for runtime errors if polyfills aren't loaded correctly
−Large dependency tree with many sub-packages increases node_modules size and installation time compared to monolithic alternatives
−Performance overhead in watch mode for incremental builds, though cache plugins can mitigate this with additional configuration