0xadada/babel-typescript-playground

babel typescript playground

learning babel transforms and typescript.

@babel/core is the core library. @babel/cli contains CLI tooling that consumes the core library.

yarn add -D @babel/core @babel/cli @babel/preset-env
yarn add @babel/polyfill

Try it

Transpile index.js (ES2017) into ES5 and run lib/index.js in node.

$ npm run build:js
$ npm run -s start
hello,
world

Transpile index.ts (TypeScript) into ES5 and run lib/index.js in node.

$ npm run build:js
$ npm run -s start
hello,
world

How it Works

Babel

Parse all the JavaScript files in the src directory, apply any transformations we have told it to, and output each file to the lib directory.

Transformations come in the form of plugins, which are small JavaScript programs that instruct Babel on how to carry out transformations to the code.

to use the arrow function transformation:

npx babel src/ --out-dir lib/ --plugins=@babel/plugin-transform-arrow-functions 

Babel also allows for presents, which are named sets of transformations:

npx babel src/ --out-dir lib/ --presets=@babel/preset-env 

Converts this ES2017:

const fn = (value) => value;

into

"use strict";

var fn = function fn(value) {
  return value;
};

TypeScript

To handle typescript, add the @babel/preset-typescript plugin.

yarn add -D @babel/preset-typescript

Given a TypeScript function:

const fn = (value : Number) : String => value.toString();

You'll need to specify the .ts extension to specify the TypeScript file:

$ yarn -s babel --extensions ".ts" example.ts
"use strict";

require("core-js/modules/es6.regexp.to-string");

var fn = function fn(value) {
  return value.toString();
};