How to use plug-in tools to convert ES6 code into ES5-JS Tutorial-php.cn

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

php中世界最好的语言

Release： 2018-03-10 14:08:58

Original

3065 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!