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 togit
, then you need to fill in the warehouse address ofgit
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;
};
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。