So verwenden Sie Plug-in-Tools zum Konvertieren von ES6-Code in ES5-js-Tutorial-php.cn

So verwenden Sie Plug-in-Tools zum Konvertieren von ES6-Code in ES5

php中世界最好的语言

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

Original

3069 Leute haben es durchsucht

Dieses Mal zeige ich Ihnen, wie Sie Plug-in-Tools zum Konvertieren von ES6-Code in ES5 verwenden. Was sind die Vorsichtsmaßnahmen bei der Verwendung von Plug-in-Tools zum Konvertieren von ES6-Code in ES5? Werfen wir einen Blick darauf.

Es gibt viele Tools zum Konvertieren von ES6 in ES5.

In der npm-Umgebung: cd in das Projektverzeichnis; init -y

npm install babel-cli -g (installiere babel-cli zuerst global);

npm install babel-cli babel-preset-es2015 --save-dev (installiere diese beiden lokal);

Projektverzeichnis:

So verwenden Sie Plug-in-Tools zum Konvertieren von ES6-Code in ES5 Der Inhalt der .babelrc-Datei ist:

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

Nach dem Login kopieren

./ src/index.js Der Inhalt ist;

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

Nach dem Login kopieren

Lassen Sie die Syntax von es6; testen Sie sie einfach;

let name = "liuliu";
console.log(name);

Nach dem Login kopieren

Zum Schluss: babel src/index.js -o dist/index.js (O nicht weglassen, sonst wird das Ergebnis direkt im Terminal ausgegeben und keine Datei generiert)

Sie können das konvertierte Ergebnis von .dist/index.js sehen

Sie sehen auch die

-Variablenausgabe, nachdem der Browser geöffnet wurde

Im Allgemeinen haben alle Abhängigkeiten Babel, wenn Sie sie verwenden. Ich verwende keine automatischen Komponententools für tägliche Tests oder einzelne Verweise auf das Projekt.

Ich glaube, ich habe es gelesen. Sie beherrschen die Methode im Fall dieses Artikels. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

Eingabe, Ausgabe, Modulanalyse von webpack3.x

Vue2-Tab-Wechselmethode

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Plug-in-Tools zum Konvertieren von ES6-Code in ES5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!