Was bedeutet Babel in Vue?

In Vue ist Babel ein JavaScript-Compiler, der hauptsächlich zum Konvertieren von in ECMAScript 2015+-Syntax geschriebenem Code in abwärtskompatible JavaScript-Syntax verwendet wird, damit er in aktuellen und älteren Versionen von Browsern oder anderen Umgebungen ausgeführt werden kann.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Vue-Version 2.9.6, DELL G3-Computer.

ES6-Syntax wird häufig in Vue-Projekten verwendet, aber manchmal müssen unsere Projekte mit Browsern niedrigerer Versionen kompatibel sein. In diesem Fall müssen wir das Babel-Plug-In einführen, um es6 in es5 zu konvertieren. Werfen wir einen Blick darauf, was Babel ist.

Babel ist ein JavaScript-Compiler

Babel ist eine Toolkette, die hauptsächlich zum Konvertieren von in ECMAScript 2015+-Syntax geschriebenem Code in abwärtskompatible JavaScript-Syntax verwendet wird, sodass er auf aktuellen und älteren Versionen von Browsern oder anderen Umgebungen ausgeführt werden kann. Nachfolgend ist aufgeführt, was Babel für Sie tun kann:

• Grammatikkonvertierung

• Fehlende Funktionen in der Zielumgebung durch Polyfill hinzufügen (durch Einführung von Polyfill-Modulen von Drittanbietern, z. B. core-js)

• Quellcode Konvertierung (Codemods)

// Babel 输入： ES2015 箭头函数
[1, 2, 3].map(n => n + 1);

// Babel 输出： ES5 语法实现的同等功能
[1, 2, 3].map(function(n) {
  return n + 1;
});

Schritte zur Einführung von babel in vue

1. Installieren Sie das babel-polyfill-Plugin

npm install --save-dev babel-polyfill

2. Nach erfolgreicher Installation gibt es drei Möglichkeiten, es einzuführen

Die erste: In der Eintragsdatei eingeführt, zum Beispiel:

import 'babel-polyfill'

zu main.js hinzufügen. Zweitens: Ändern Sie es in der Datei webpack.config.js am Eintragseingang wie folgt

Drittens: Verwenden Sie CDN-Ressourcen, die der HTML-Seite als JS-Dateien hinzugefügt werden: Beispiel:

Beschreibung: Das

babel-Plugin kann uns zwar bei der Konvertierung der es6-Syntax in es5 helfen, dies ist jedoch nicht möglich Konvertieren Sie die neue API, z. B. Iterator, Generator, Set, Map, Proxy, Reflect, Symbol, Promise und andere globale Objekte. Wenn Sie möchten, dass diese Methode ausgeführt wird, müssen Sie babel-polyfill verwenden, um einen Shim bereitzustellen für das aktuelle Umfeld.

Der Installationsbefehl lautet wie folgt.

　　

Fügen Sie dann die folgende Codezeile am Kopf des Skripts hinzu.

　　

【Verwandte Empfehlung: „vue.js Tutorial“】

Das obige ist der detaillierte Inhalt vonWas bedeutet Babel in Vue?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!