The use of the babel7.0

What is the Babel

Babel is a Node-based tool that transcodes es6’s new syntax and features.

The improvement of babel7

Babel7 has split each function into different packages, so we need to understand the functions of each package. The most common ones are as follows

@babel/cli
@babel/core
@babel/preset-env
@babel/polyfill
@babel/runtime
@babel/plugin-transform-runtime
@babel/plugin-transform-xxx
Copy the code

@babel/cli

@babel/cli is a built-in command line tool provided by Babel. It mainly provides the Babel command to compile js files. It is different from @babel/node command line tool. But the official documentation clearly defines their respective scope of use:

@babel/cli is an installation suitable for local projects, not global installations

Compile using @babel/cli

babel test.js
Copy the code

@babel/node Is similar to the Node CLI. It is not applicable in the product, meaning it is suitable for global installation

Compile using @babel/node

babel-node test.js
Copy the code

@babel/core

This package is the core of Babel functionality, meaning that the core methods are contained in this package. Now when you try to convert using the above transcoding method, you will find an error like this:

Could not find @babel/core package

At this point we need to install the package as follows:

npm install @bable/core -D
Copy the code

Now, try transcoding!

// index.es6.js
const user = 23;
let [length] = [];
const add = (a, b) = > a + b;
Copy the code

Run the transcoding command

babel index.es6.js index.es5.js
Copy the code

The contents of the transcoded index.es5.js file are as follows:

// index.es5.js
const user = 23;
let [length] = [];
const add = (a, b) = > a + b;
Copy the code

Transcoding is now executed without error, but there seems to be no change!

plugins

What’s the reason?

As mentioned earlier, in Babel7, all functions are separated into different packages. For example, if you need to convert arrow functions into normal functions, you need to have corresponding packages to implement this function. This package is @babel/plugin-transform-arrow-functions

Packages like this are called plugins in Babel

Let’s try again

  1. The installation@babel/plugin-transform-arrow-functions
npm install -D @babel/plugin-transform-arrow-functions
Copy the code
  1. Run the transcoding command
babel index.es6.js index.es5.js --plugins @babel/plugin-transform-arrow-functions
Copy the code

At this point, let’s look at index.es5.js

As follows:

// index.es5.js

const user = 23;
let [length] = [];

const add = function (a, b) {
  return a + b;
};
Copy the code

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * Click on the link below to see all of them

Click to see the list of plug-ins

If there are many plug-ins, typing directly from the command line is cumbersome, so Babel gives us two ways to configure plug-ins

  1. Created in the project root directory.babelrcFile, as follows:
{
    "plugins": [
        "@babel/plugin-transform-arrow-functions"."@babel/plugin-transform-block-scoping"]}Copy the code
  1. Created in the project root directorybabel.config.js, as follows:
let plugins = [
    "@babel/plugin-transform-arrow-functions"."@babel/plugin-transform-block-scoping" 
]
module.exports = {plugins}
Copy the code

Both of these configuration methods allow us to write less on the command line

presets

After understanding plugins, we can talk about presets. Now it is convenient to use plugins, but it is still troublesome to write a bunch of plugins and download them every time you configure them. This is where presets come in. Plugins pack, to put it bluntly, helps us sort out the plugins we need in advance.

This means that presets contain common plugins that you need. If you want to customize some plugins, you can use presets in conjunction with plugins

The common presets are listed below

  • @babel/preset-env
  • @babel/preset-flow
  • @babel/preset-react
  • @babel/preset-typescript

When configured, they are attached to plugins as follows

  1. use.babelrc
{
    "presets": [
        "@babel/preset-env"]."plugins": []}Copy the code
  1. usebabel.config.js
const plugins = [];
const presets = [];
module.exports = {plugins,presets}
Copy the code

@babel/polyfill

Polyfill is also known as a gasket, which is to smooth out the differences between different browsers or different environments

Because some environments support this function and others don’t, this is a yes and no problem that can’t be solved simply by @babel/preset-env.

@babel/preset-env solves the problem of turning high versions of preset into low versions because low versions may be different in different environments.

The findIndex method does not exist in earlier languages, so we need to implement this method manually. The implementation of this method is already in the @babel/ Polyfill package.

So, we just need to introduce this package into the project

index.es6.js

import '@babel/polyfill'

/ /...
Copy the code

@babel/runtime

Because Babel might generate a bunch of helpers when transcoding, all of these helplers are put in the @babel/ Runtime package. If @babel/ Runtime is not installed for transcoding, these helpers will be generated directly in the code. If the same features are transcoded, there will be code redundancy. That’s why @babel/ Runtime exists.

@babel/plugin-transform-runtime

Using @babel/ Runtime only guarantees helper, but we need to introduce it into our project. That’s what @babel/ plugin-transform-Runtime does.

The configuration is as follows:

{
    "plugins": [
        "@babel/plugin-transform-runtime"]}Copy the code

@babel/register

The purpose of this package is to provide transcoding capability at runtime. For example, when we want to use es6 module syntax in the Node environment, we can introduce it as follows

Run NPM install @babel/ core@babel/register@babel /plugin-transform-modules-commonjs to install the corresponding package.

// entery.js
require('@babel/register') ({plugins: ["@babel/plugin-transform-modules-commonjs"]})require('./index.js') // In general, index.js is the entry file for the project
Copy the code

Run node entry.js