Babel installation

In this section we will learn how to install Babel . After installing Babel , we can ES2015 + JavaScript application code using 0610413f8bf2ae syntax into code that can be used in the current browser. In this tutorial, we learn the knowledge of Babel7

Ready to work

Babel is based on Node.js , if we want to install Babel , then we need to install Node.js first.

Node.js official website address: https://nodejs.org/en/ . Then follow the prompts to install.

After installation, we can enter node -v and npm -v in the command tool to check Node.js and npm is successful. If the version number appears, the installation is successful. If it shows:

Create project

First, let's create a project, use the cd command in the command tool to enter the specified path, and execute the following command under the specified path:

mkdir my_babel

my_babel will be successfully created in the specified path, as shown in the following figure:

Then you need to use the cd command to enter the project path, and then execute the initialization command:

npm init

Executing the above command in the node pakeage.json file. This file is mainly used to record the detailed information of this project. It will record the packages we will use in the project development, as well as the detailed information of the project, etc. Project. It will be more convenient in future version iterations and project migration. And using npm init initialize the project has another advantage, that is, when transferring the project, you do not need to send the project dependency package to the other party. After the other party accepts your project, execute npm install to download all the project dependencies into the project.

As shown in the figure below, after executing the command, we will fill in some configuration information. If you don't know how to fill in, you can press Enter all the way:

If you want to select the default options for all configuration items, you can directly execute the npm init -y command, which can quickly generate a package.json file.

package name : The field indicates the name of the project.
version : Indicates the version number.
description : Indicates the description of the project.
entry point : The entry file of the project.
test command : What command should be used to execute the script file when the project is started.
git repository : If you want to upload the project to git , then you need to fill in the warehouse address of git
keywirds : Project keyword.
author : The author's name.
license : Issue the certificate required for the project.

start using

Before we use Babel Babel ’s have a general understanding of the various components of Babel . Here are some commonly used important parts of 0610413f8bf58d:

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

The main attention is @ symbol, this symbol is babel7 have properties, which is babel7 a major adjustment, the original babel-xx package to migrate to unified babel the domain and the domain of @ to identify the symbols.

For example, if you want to install Babel CLI babel6 is no @ symbol in 0610413f8bf6b8, the following command is as follows:

npm install --save-dev babel-cli

babel7 you change to 0610413f8bf6ec, you need to install @babel/cli . The command is as follows:

npm install --save-dev @babel/core @babel/cli

@babel/cli is babel built-in command-line tools provided, mainly to provide babel this command to js compile files. Babel core functions are located @babel/core module.

When we execute this command, the effect is as follows:

Among them, --save means that it is installed within the project, not a global installation. -dev is a development environment, which needs to be relied upon during development, and does not need to be relied upon when it is officially launched. Do not use the global installation Babel CLI , because different projects in the same computer may require different versions of Babel , so the update is more convenient.

After the installation is successful, @babel/cli will be added to the devDependencies package.json file, for example:

"devDependencies": {
    "@babel/cli": "^7.11.5",
    "@babel/core": "^7.11.5"
}

If we want to successfully use Babel convert es6 to es5 , we also need to install a @babel/preset-es2015 preset:

npm install --save-d @babel/preset-es2015

As shown below:

But the code cannot be successfully compiled at this time. If you want to compile the code, we need to create a .babelrc configuration file in the project root directory and define the installed preset.

We execute the following command to create a configuration file:

type nul>.babelrc

Add parameters to the file:

{
    "presets": ["es2015"],
    "plugins": []
}

So we can execute the npx babel index.js command to compile the code. index.js .js file that needs to be compiled.

Script command settings

In addition to using the npx babel command to directly run Babel , we can directly put the command into the npm script using the local version. Just add a field to the scripts field in the package.json

Represented example, the following command to compile the entire src files and output to lib folder, can add the following command after build compiled code it:

"scripts": {
    "build": "babel src -d lib"
},

Example:

We can try the effect. For example, we create a index.js src folder and write the following content:

var add = (x, y) => x + y;

npm run build command in the command tool:

>　npm run build

At this time lib also generates a file folder index.js file, this file is compiled code, as follows:

"use strict";

var add = function add(x, y) {
  return x + y;
};