What do you know about the Sounds of Space?
I. Introduction The sounds of space are sounds that hav...
With the aid of the program Babel, you can write Javascript code with the newest syntax and features while still running it in browsers that might not support them. Your contemporary JS code will be converted by Babel into an older form of Javscript that more browsers can understand.
Babel is a toolchain used primarily for converting ECMAScript 2015+ code into backwards-compatible versions of JavaScript in current and legacy browsers or environments. ECMAScript 2015+ supports ES6+.
First go to Babel’s official website and click the Docs button.
The Babel-transpiler transforms contemporary JavaScript syntax into a format that is simple enough for older browsers to understand. For instance, function, var, and other classes will be converted from arrow function, const, and let classes. Here, the arrow function’s syntax is changed to a standard function while preserving its functionality in both situations.
Here is the list of ECMA Script features available in JavaScript, which can be transpiled and polyfilled −
ECMA Script features that can be polyfilled −
Plugins and Presets are config details for Babel to transpile the code.
Babel presets are a set of plugins, i.e., config details to the babel-transpiler that instruct Babel to transpile in a specific mode.
There are some features like methods and objects, which cannot be transpiled.
You can think of polyfill as a source code. It stores sources of all the es6 new features.
ES5 + polyfill = ES6.
Babel-cli comes with a bunch of commands where the code can be easily compiled on the command line.
Advantages:
@babel/core
– This is the main engine that knows how to transform code based on a set of instructions it is given@babel/cli
– This is the actual program we are going to run to trigger the core engine and output a transformed Javascript file@babel/preset-env
– This is a preset that tells the core engine what kind of transformations to make. It looks at your environment (in our case it will be our package.json
file) to determine what kind of changes need to be made depending on the browsers you wish to support.The first step to set up Babel in a project is to install the package using npm and add it as a dev dependency. Assuming you have a working Node.js environment already in place, it’s just a matter of running the following in your terminal:
mkdir babel-test
cd babel-test
npm init -y
npm install --save-dev babel-cli
Next, we can open package.json
and add a build
command to our npm scripts:
"scripts": {
"build": "babel src -d dist"
}
But wait! Before running Babel we must install and set up the plugins that will transform our code. The easiest and quickest way to do this is to add the Env preset, which selects the appropriate plugins depending on the target browsers that you indicate. It can be installed using:
npm install babel-preset-env --save-dev
Then create a .babelrc
file in the root of your project and add the preset:
{
"presets": ["env"]
}
The .babelrc
file is the place where you put all your settings for Babel. You’ll be using this primarily for setting up presets and plugins, but a lot more options are available. You can check the complete list in the Babel API page.
Alternatives
The most popular option is TypeScript, which is regular JavaScript that implements modern ES features but also adds others, especially regarding type safety.
You cannot copy content of this page