Introduction to the Babel tool

Babel is a tool for converting es6 + code into a backwardly compatible JS syntax so that the code works in current and older versions of browsers.

Babel is available online and locally.

Online comparison tool

  • bablejs.io
  • (Chinese website) bablejs.cn

Local download

The advantages of online sites are quick and convenient, but if we want to compare the entire project code, online sites are not so comfortable to use, at this time we can choose to download the tool locally, the following will explain the download and environment setup steps.

conditions

  • The node environment

Download the steps

  • Open the command line, find the project file you want to compare and enter
  • Execute NPM init -y to create a package.json file
  • Run NPM install@babel /core to download the core module of the entire tool to provide core functions
  • Run NPM install@babel /preset-env, which is a set of plug-ins that saves us from downloading different plug-ins for different grammes, and has the ability to convert all ES6 grammes to ES5
  • Run NPM install@babel /cli. The main function is to compile and convert JS files through command line NPX

The configuration file

After downloading, we need to set up a configuration file for the tool, just like WebPack, that explains what features to use for file management

  • Create a configuration file under the node_moudules sibling. Babelrc, which tells you which plug-ins to use when compiling a file
  • This file is strictly Json, so be sure to use double quotes
  • Presets are presets that can then be written into the plugin when additional plug-ins are needed
{
    "presets": ["@babel/preset-env"]."plugin":[
        ...
    ]
}
Copy the code

For example,

After downloading and configuring the Babel information, let’s use it briefly to see if it works

  • Create an A.js file with a simple ES6 syntax

  • On the command line, execute NPX Babel a.js -o b.js
  • The file name should not contain special characters
  • Babel a.js -o b.js –watch NPX Babel a.js -o b.js –watch NPX Babel a.js -o b.js –watch
  • When executed, the simple syntax you just wrote changes

Study suggest

Consider what’s wrong with the old syntax and how it can be improved. As you look at why the new feature is the way it is, take a look at the compiled results of Babel