Introduction to babel-core

babel-core is a central package in the Babel ecosystem, primarily used for transformations and transpiling of JavaScript code. It provides numerous APIs to manipulate JavaScript code, enabling developers to use next-generation JavaScript features and compile down to the version compatible with their target environments.

Key APIs of babel-core with Code Snippets

Babel Transform

The babel.transform function is one of the most widely used API in babel-core. It allows developers to transform their JavaScript code into a different format.

 
  const babel = require('@babel/core');
  const code = 'const x = (a) => a + 10;';
  const output = babel.transform(code, { presets: ['@babel/preset-env'] }).code;
  console.log(output);  // Transformed code
 

Babel Transform File

The babel.transformFile function reads a file and then transforms its contents.

 
  const babel = require('@babel/core');
  babel.transformFile('example.js', { presets: ['@babel/preset-env'] }, function (err, result) {
    if (!err) {
      console.log(result.code);  // Transformed file content
    }
  });
 

Babel Transform Sync

The babel.transformSync function is the synchronous version of babel.transform.

 
  const babel = require('@babel/core');
  const code = 'let foo = () => {};';
  const result = babel.transformSync(code, { presets: ['@babel/preset-env'] });
  console.log(result.code);  // Synchronous transformation
 

Babel Transform File Sync

The babel.transformFileSync function is the synchronous version of babel.transformFile.

 
  const babel = require('@babel/core');
  const result = babel.transformFileSync('example.js', { presets: ['@babel/preset-env'] });
  console.log(result.code);  // Synchronously transformed file content
 

Babel Parse

The babel.parse function parses the code to an AST (Abstract Syntax Tree).

 
  const babel = require('@babel/core');
  const ast = babel.parse('const hello = () => {};', { sourceType: 'module' });
  console.log(ast);  // Parsed AST
 

Babel Transform From AST

The babel.transformFromAst function transforms based on a given AST.

 
  const babel = require('@babel/core');
  const ast = babel.parse('const greeting = "Hello!";', { sourceType: 'module' });
  const { code } = babel.transformFromAst(ast, null, { presets: ['@babel/preset-env'] });
  console.log(code);  // Transformed code from AST
 

Full Application Using babel-core APIs

Let’s create a small application where we take a source file with modern JavaScript features and output the file transformed into ES5.

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

  function transformFile(inputPath, outputPath) {
    const inputCode = fs.readFileSync(inputPath, 'utf8');
    const transformedCode = babel.transformSync(inputCode, { presets: ['@babel/preset-env'] }).code;
    fs.writeFileSync(outputPath, transformedCode);
    console.log('File successfully transformed and saved as', outputPath);
  }

  transformFile('modern.js', 'es5.js');
 

In this example, modern.js is a file with modern JavaScript code, and the script transforms it into es5.js using babel-core.

Hash: 7d84b98ee8c93542575c26053f7777eaae70a76ff7d5afdee297ff2dcf6cc34f