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
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
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;
};
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();
};