Nov 9, 2018
Complete Babel 7 Guide for Beginners
Check out our Babel 7 and Webpack 4 video course:
https://www.udemy.com/course/web-development-html5-css3-php-oop-and-mysql-database/?referralCode=2C5DD5C44FA59413D0CD
Take your JavaScript skill to the next level:
https://www.udemy.com/course/javascript-boost/?referralCode=06AF8499F008CC241201
Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments. ECMAScript 2015+ equals to ES6+.
You can think of Babel as a translator. ES6+ JS offers us many new features and syntaxes. They can tremendously improve our development efficiency. But at this moment, most of these new features are unrecognizable in browsers. To find a balance between compatibility and development convenience and efficiency, Babel was developed.
We programmers write codes in ES6+ and then ask Babel to translate them into codes browsers can understand.
Babel itself can only handle translating new syntaxes. ES6+ has also added many new APIs like Promise, Map, Object.assign(), etc. New API means new objects, properties, and methods. API is just a fancy name. Don’t get intimidated by it. To deal with them, we have to add these APIs into ES5. This job is done by an assistant of Babel. We will show you who this assistant is later.
So remember this conclusion: Babel translates new syntaxes and its assistant handles new APIs.
Babel Introduction:
First go to Babel’s official website and click the Docs button.
Babel handles syntax translation. Polyfill handles missing features. So answer to the question we left before: the assistant of Babel is polyfill.
Apart from translating ES6+, Babel can also handle JSX and TypeScript. So here comes another concept: preset. Preset is the translation Babel uses. It controls how Babel does the translation.
So now, you have learnt two important concepts of Babel: preset and polyfill.
Next, let’s install Babel.
Babel Installation and Configuration:
This is the installation command suggested by Babel’s official manual. If you take a close look, you will find that there are actually four packages being installed, three as development dependency and one as production dependency.
- npm install — save-dev @babel/core
- npm install @babel/cli
- npm install @babel/preset-env
- npm install — save @babel/polyfill
Babel/core, just like what its name has suggested, is the core of the entire Babel program.
Babel/cli is the command line interface. We use it to communicate with babel.
Babel itself does not know how to translate ES6 codes. It requires plugins to tell it how. There are many plugins. Installing and setting them one by one is a labor-intensive job. Therefore, the best solution is to use babel preset. Preset is a collection of plugins. The preset we use is preset-env.
Babel/preset-env is the standard Babel 7 uses to translate ES6+ into ES5. In Babel 7, preset-env has replaced preset-2015/6/7, etc.
Babel/polyfill is for adding ES6+ features into ES5. So why do we need to do that?
New syntax is not the only difference between ES6 and ES5. ES6 has already received many new APIs. API is just a fancy name for built-in objects. These new built-in objects are very useful but the problem is they do not exist in the ES5 environment.
The only solution is to add these built-in objects into the ES5 environment. This is what polyfill is for.
Let’s turn on our own terminal and set up a project.
First, we turn on terminal and create a project root directory. Then we CD into it and npm init.
Next, we copy the four installation commands from Babel’s official manual and paste them into terminal.
When the installation is done, you should see these four packages being installed:
Let’s open our project in VSC and check package.json.
Cli, core, and preset-env are development dependencies. polyfill is a production dependency.
You can think of polyfill as a source code. It stores sources of all the es6 new features.
ES5 + polyfill = ES6.
Before we can use Babel, we need to configure it. The best way to do it is to create a file to store Babel configuration information.
In Babel 6, we store configuration information in .babelrc or package.json.
Babel 7 offers us a new solution: babel.config.js.
The Babel manual has offers us a template for creating babel.config.js. We just need to copy it into our project root folder.
First, we module exports an object.
Then we define a presets property in it. The value of presets is an array.
Inside the array, we put another array.
The first element of the child array is the preset we want to use. Here, we set it to @babel/env or @babel/preset-env.
The second element is a config object. Inside it, there are two properties: targets and useBuiltIns. Targets is for configuring browsers and useBuiltIns for polyfills.
Now, we have installed and configured Babel.
Next, let’s test it.
In project root directory, we create a new file: es6.js.
Then we turn on terminal and input a babel command: npx babel es6.js. This is what we will get:
ES6 let has been converted into ES5 var.
NPX babel is the same as node_modules/.bin/babel
Now, we have successfully “Babeled” our first ES6 file.
You might want to output the translated file as an independent file. In this case, you need -o or — output-dir.
-o and — output-file can only translate one file at a time. In your real-life development, you might want to store ES6 files in one directory and translate every file in that directory.
For example, in project root directory, we create two child directories: ES6 and ES5. We write our ES6 files in dir ES6. Then we “Babel” them into dir ES5. HTML files link JS files from dir es5.
In this case, the command we need is npx babel ES6 -d ES5 or npx babel ES6 — out-dir ES5.
Now, all files in dir ES6 will be “babeled” into dir ES5.
Next, let’s show you what polyfill can do for us.
This is the file we want to babel:
It uses lots of ES6 APIs that do not exist in ES5. The only way to enable them to work in an ES5 environment is to add source codes of these new APIs into the ES5 environment. This is what polyfill is for and this is also why polyfill is installed as a production dependency. We do need it in production.
Here is a less accurate analogy to help you understand why we need polyfill.
Let’s we got a jQuery program. We cannot run our jQuery program directly. We need to link in the jQuery source code first. Polyfill is the jQuery source code we link in.
This is the “babeled” ES5 file we got:
See all those required files? They are loaded by polyfill. But the “babeled” file cannot be used by HTML files directly. We need to bundle them using webpack. But all the needed “API source codes” have been loaded.
This setting is controlled by the useBuiltIns proeprty in babel.config.js. This property has three values: usage, false and entry.
Usage is the best and most commonly used value. It is also what we recommend.
Apart from usage, useBuiltIns have two other values: false and entry.
False will shut down polyfill. This means you have to link the needed APIs manually. You definitely do not want to do that.
If you use entry, you need to “require” @babel/polyfillEntry at the beginning of your file. Then babel will first check the targets property to figure what the target browsers are. It will load all APIs that are not supported by the target browser. Obviously, we will get lots of unneeded APIs this way.
So in summary, set useBuiltIns to usage and Babel will take care of the rest for you.
Check out our FULL Babel 7 and Webpack 4 Course at Udemy:
https://www.udemy.com/course/web-development-html5-css3-php-oop-and-mysql-database/?referralCode=MDM_BABEL_P
Check out our FULL web development course at Udemy:
