Community Learn Tools Library Leisure
search
English
Home > Web Front-end > JS Tutorial > How to use plug-in tools to convert ES6 code into ES5

How to use plug-in tools to convert ES6 code into ES5

php中世界最好的语言
Release： 2018-03-10 14:08:58
Original
3118 people have browsed it

This time I will show you how to use plug-in tools to convert ES6 code into ES5, and use plug-in tools to convert ES6 code into ES5. What are the precautions?The following is a practical case, let’s take a look take a look.

There are many tools for converting ES6 to ES5. The following introduces babel to convert ES6 code;

In npm environment: cd to the project directory;

npm init -y

npm install babel-cli -g (install babel-cli globally first);

npm install babel-cli babel-preset-es2015 --save-dev (install these two locally);

Project directory:

How to use plug-in tools to convert ES6 code into ES5

The content of the .babelrc file is:

{
    "presets": [
        "es2015"
    ],
    "plugins": [
    ]
}
Copy after login
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>转化test</title>
    <script src="dist/index.js"></script>
</head>
<body>
    <h3>hello ECMA SCRIPT 6</h3>
</body>
</html>
Copy after login

./src/index.js The content is;

let name = "liuliu";
console.log(name);
Copy after login

let is the syntax of es6; simply test it;

Finally: babel src/index.js -o dist/index.js (Do not omit o, otherwise the result will be output directly in the terminal, no Files will be generated)

You can see the converted result of .dist/index.js;

You will also see variable output after opening the browser;

Generally, when using component tools such as webpack, all dependencies will have babel; here we just don’t use automatic component tools for daily testing or single reference to the project;

I believe you have mastered the method after reading the case in this article , for more exciting content, please pay attention to other related articles on the php Chinese website!

Related reading:

Entry, output, module analysis of webpack3.x

##Vue2 tab switching method

The above is the detailed content of How to use plug-in tools to convert ES6 code into ES5. For more information, please follow other related articles on the PHP Chinese website!

Related labels：
code tool plug-in
source：php.cn
Previous article：Introduction and export of commonJS and es6 specifications Next article：Detailed explanation of scope and declaration of variables in ES6
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
What is the format of the variables in the return value? I am a new learner of php. I found a piece of code: if($x<time()){return[false,'error']...
From 2024-04-06 21:55:20
0
1
778
Sudoku checker not working? Can anyone help me identify the error? I tried everything on the online editor but still get the error. But when I do this on VSC...
From 2024-04-06 21:21:07
0
1
474
How to make floated elements stack vertically instead of horizontally in CSS? I'm trying to make a webpage with two columns, with main content on one side and additiona...
From 2024-04-06 20:45:26
0
2
386
Is there a way to force the text in the flexbox to be vertically centered, no matter what other CSS code we have? I have the following CSS code that is part of a larger CSS code used in a website I'm deve...
From 2024-04-06 20:41:51
0
1
518
How to solve the mysterious white space at the bottom of the page in CSS I'm trying to build a simple webpage using Bootstrap and D3, but I don't know how to get r...
From 2024-04-06 20:22:15
0
1
454
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template