Babel and Polyfill in ReactJS app

Tram Ho


When I initialized the app, reactjs and config babel, I wondered and encountered some cases like how babel would transform my ReactJS code, and obviously I had configured babel to transform my code into the version. js is suitable, suport the old browser versions, why when you open the browser, it still can’t run. Through research, I have understood a little bit and want to share with everyone today.

To go into specific examples for you to easily imagine:

Initialize the application

This time I will not use create-react-app anymore, I initialize it from scratch: You create a folder and name it according to you want, I named example-babel , cd to this file and initialize the project with the command line : npm init -y

Next, I create 2 folders: src and public in the src directory, I create an index.jsx file with the form:

And in the public directory, I create the index.html file, note that I import React and ReactDOM = cdn.

At this point, if you try to open the index.html file in the browser, it will display blank, nothing.

Now I will install babel / core which is the core of babel / cli to execute the command with babel on the command-line interface:

npm i -D @babel/core @babel/cli

To make sure babel / cli works and check the babel version, I execute the command on the command-line:

node_modules/.bin/babel --version

It displays the current version of babel I have installed as 7.10.5. it work!

Next, to convert jsx code to js, ​​I need a babel preset, which is like a plugin to help babel determine the need to transform jsx code to js but not other formats.

Because babel can do pretty much every transform, not just jsx. So I’ll install babel / preset-react:

npm i -D @babel/preset-react

Now that I have enough tools to convert the code in my jsx file to pure js, I run the command on the terminal:

npx babel src --presets @babel/react --out-dir public

Here, babel command-line will take input as directory with source js files in src, followed by appropriate presets specifying transform, and then folder to show public output.

That’s it, now you notice that in the public folder, babel will give me an index.js file and it looks like this:

And on the browser, it displayed the jsx code I wrote:

So, as you can see, babel converts the js code to pure React.createElement () form. If you take the trouble to learn the initial versions of reactjs, the ReactJS code is similar to the file I just compiled, quite long and complicated right. When babel has rendered the jsx code like that, the conversion from React.createElement () to html element will be done by React, ReactDOM in cdn, I import in the header of the html file.

Now to the question, why did I use babel to set target the version of the browser I want to support and still need babel polyfill /

First, I install babel / preset-env to be able to configure babel support for the specific browser version, as well as define the plugins I will use to transform:

npm i @babel/preset-env -D

Next, I create a .babelrc file to configure babel and enter:

Here instead of entering the preset as in the command-line above ( npx babel src –presets babel / react –out-dir public ), I set it up. babelrc keeps it brief. As I said above babel / preset-env is used to configure specific browser versions, so I have to fix a bit here:

Adding a configuration to babel / preset-env, I put it in an array, with the first value being preset babel / preset-env and the second value being the additional config object. Now instead of running npx babel src –presets babel / react –out-dir public on the command-line, I run npx babel src –out-dir public . The result is:

As you can see, the arrow function in my map function has changed to a normal function, the template in it has also changed to the concat function. But if there are conditions to test run on older browsers like ie 11, it still does not support, so why? Because babel only interprets what browsers can understand, but not all, because those browsers lack built-ins such as find function, map of array, Object.assign … So, babel polyfill is in charge of understanding this syntax, or in other words, babel is responsible for the code conversion and polyfill is used to implement the converted code. The implementation of the polyfill needs to be available at runtime, so I leave it in the html page header.

So you can test well on ie 11 already.


Note: Hopefully, through the last lesson, you can learn something interesting, see you in the next lesson.

Share the news now

Source : Viblo