A quick introduction to Babel
What is babel?
Babel does this:
ES2015+ JS code — — — — — > Old JS code
and also something extra…
Babel does the above process by
- Transform syntax
- Polyfill features
Plugins
Babel converts the es6 javascript code to es5 by the help of certain “features” or plugins. They have to be additionally installed and removed if the particular feature is not used.
We will be using two plugins
plugin-proposal-class-properties and plugin-transform-runtime
The first one is to enable class keyword transformation and the second one is used to primarily used to reduce codesize.More about them:
https://babeljs.io/docs/en/babel-plugin-proposal-class-properties
https://babeljs.io/docs/en/babel-plugin-transform-runtime
Run this command to install them: npm install --save-dev @babel/plugin-proposal-class-properties @babel/plugin-transform-syntax
Remember to install the runtime dependency for the plugin-transform-syntax:npm install --save @babel/runtime
Presets
Presets are a group of plugins and are quite helpful instead of typing each plugin separately:
A popular preset is the env preset:
npm install --save-dev @babel/preset-env
This “smart” preset convert ES2015,ES2016 etc to early javascript version. We can also pass option to a preset as an object.
Configuration file
Babel can applied to a folder/project by specifying a .babelrc.json file in the project root.
Here is a sample file:
Here the env preset is passed with additional options object such the compiled code supports(targets) atleast chrome version 58 and internet expolorer version 11.
More options can be found here: https://babeljs.io/docs/en/babel-preset-env#options
Let’s see some babel magic
But first we have to install the core babel and babel cli packages.
npm i — save-dev @babel/core @babel/cli
Okay, enough configuration.
Let us convert a “newer” javascript code to a “older” one.
npx babel script.js — out-file build.js
Here we convert script.js file containing the destructuring syntax to es5 code.
We can also watch for changes in script.js file and automatically do the conversion by the — watch flag.
We can also convert files in a folder to compiled folder by — output-dir.
npx babel src — out-dir dir
