Bada
Bada's Coding

Bada's Coding

Babel - Basics

Bada's photo
Bada
·Sep 11, 2022·

3 min read

Table of contents

Introduction

In this article, how to use Babel will be covered.

Basic

Introduction

In this part, basic part of Babel will be covered.

Installation

$ npm install --save-dev @babel/core

Example

Objective

changing JSX into JavaScript

Installation

This is needed to change JSX into JavaScript.

$ npm install --save-dev @babel/preset-react

Execution

Please write this code in [app.js].

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

const result = babel.transformSync('function App(p1) {return <div>{p1}</div>;}', {
  presets: ['@babel/preset-react'],
});

console.log(result.code);

If you run the file like this,

$ node app

The result will be like this.

function App(p1) {
  return /*#__PURE__*/ React.createElement('div', null, p1);
}

CLI

Introduction

In [Basic], we had to put the code as a string. But using '@babel/cli', we can compile the whole file. Also, we can make a new file where compiled codes are.

Installation

$ npm install --save-dev @babel/cli

Example

Objective

changing JSX/TypeScript into JavaScript

Installation

This is needed to change JSX into JavaScript.

$ npm install --save-dev @babel/preset-react

This is needed to change TypeScript into JavaScript.

$ npm install --save-dev @babel/preset-typescript

Printing the Result in a Shell

Please write this code in [App.tsx].

function App(p1: string) {
  return <div>{p1}</div>;
}

If you run this code,

$ npx babel App.tsx --presets=@babel/preset-react,@babel/preset-typescript

You will get the result like this.

function App(p1) {
  return /*#__PURE__*/ React.createElement('div', null, p1);
}

Printing the Result in a Different File

[App.tsx] is the same.

It can be done by using '--out-file' or '-o'.

If you execute this code,

$ npx babel App.tsx --presets=@babel/preset-react,@babel/preset-typescript -o app.js

the codes of [app.js] will be like this.

function App(p1) {
  return /*#__PURE__*/ React.createElement('div', null, p1);
}

Configuration

Introduction

In [CLI], we had to write a long command in a shell. Using configuration, we can designate some things in advance so that we can write only few things in a shell.

Example

objective

changing JSX/TypeScript into JavaScript

Execution: a Custom Configuration File

Please write this code in [App.tsx].

function App(p1: string) {
  return <div>{p1}</div>;
}

Then, please write this code in [a.config.json].

{
  "presets": ["@babel/preset-react", "@babel/preset-typescript"]
}

If you run this code,

$ npx babel App.tsx --config-file ./a.config.json

you will get this result.

function App(p1) {
  return /*#__PURE__*/ React.createElement('div', null, p1);
}

Execution: a Default Configuration File

In the above example, we had to write the name of the configuration file. However, we can use a default configuration file so that we don't have to write the file name.

[App.tsx] is same as above.

Please write this code in [babel.config.json].

{
  "presets": ["@babel/preset-react", "@babel/preset-typescript"]
}

If you run this code,

$ npx babel App.tsx

the result will be same as above.

function App(p1) {
  return /*#__PURE__*/ React.createElement('div', null, p1);
}
 
Share this