What’s a Babel?

Babel is a JavaScript compiler

Babel is a toolchain for converting code written in ECMAScript 2015+ syntax into backwardly compatible JavaScript syntax so it can run in current and older versions of browsers or other environments. Here’s a list of things Babel can do for you:

  • The syntax conversion
  • Polyfill to add missing features to the target environment (via third-party Polyfill modules, such as core-JS)
  • Source code conversion (Codemods)

Using the Node environment

The configuration process includes:

1. Run the following command to install the required packages:

npm install --save-dev @babel/core @babel/cli @babel/preset-env
Copy the code

2. Create a configuration file named babel.config.json in the root directory of the project (v7.8.0 or later) and copy the following contents into this file:

{ "presets": [["@babel/env", { "targets": { "edge": "17"."firefox": "60"."chrome": "67"."safari": "11.1" }, "useBuiltIns": "usage"."corejs": "3.6.5"}}]]Copy the code

If you are using an older version of Babel, the file is called babel.config.js.

const presets = [ [ "@babel/env", { targets: { edge: "17".firefox: "60".chrome: "67".safari: "11.1",},useBuiltIns: "usage".corejs: "3.6.4 radar echoes captured.",}]];module.exports = { presets };
Copy the code

3, run this command to compile all code from SRC to lib:

./node_modules/.bin/babel src --out-dir lib
Copy the code

4. Core libraries

npm install --save-dev @babel/core @babel/cli
Copy the code

5. Manual conversion

./node_modules/.bin/babel src --out-dir lib
Copy the code

This will parse all the JavaScript files in the SRC directory, apply the code-conversion functionality we specified, and then output each file to the lib directory. Since we haven’t specified any transcoding capabilities, the output code will be the same as the input code (without retaining the original code format). We can pass in the desired transcoding functionality as a parameter.

In the example above we used the –out-dir argument. You can view a list of all the arguments accepted by the command line tool with the –help argument. But the most important parameters for us right now are –plugins and –presets.

Refer to the address