Kann Babel ES6 in ES5 konvertieren?

Ja, Konvertierungsmethode: 1. Führen Sie den Befehl „npm install -g babel-cli --save-dev“ im Projektstammverzeichnis aus, um Babel im Projekt zu installieren, und speichern Sie die Babel-Konfigurationsdatei „.babelrc“ im Stammverzeichnis des Projektverzeichnisses und legen Sie die Transkodierungsregeln fest; 2. Installieren Sie gulp und gulp-babel im Projekt und konfigurieren Sie die Datei „gulpfile.js“.

Die Betriebsumgebung dieses Tutorials: Windows7-System, ECMAScript 6&&babel Version 6, Dell G3-Computer.

Obwohl wir immer noch von ES5 besessen sind, wissen wir nicht, dass ES6 schon seit mehreren Jahren veröffentlicht wird. Die Zeiten schreiten voran und auch die WEB-Frontend-Technologie verändert sich mit jedem Tag. Es ist Zeit, einige Änderungen vorzunehmen!

ECMAScript 6 (ES6) entwickelt sich sehr schnell, aber moderne Browser bieten keine hohe Unterstützung für die neuen Funktionen von ES6. Wenn Sie also die neuen Funktionen von ES6 direkt im Browser nutzen möchten, müssen Sie andere Tools verwenden.
Babel ist ein weit verbreiteter Transcoder, der ES6-Code perfekt in ES5-Code konvertieren kann, sodass wir ES6-Funktionen in unseren Projekten verwenden können, ohne auf Browserunterstützung warten zu müssen.

Der Unterschied zwischen Babel 6 und früheren Versionen:

Die vorherige Version muss nur Babel installieren, daher enthält die vorherige Version viele Dinge, was auch zum Herunterladen vieler unnötiger Dinge führt. Aber in Babel 6 ist Babel in zwei Pakete aufgeteilt: babel-cli und babel-core. Wenn Sie babel in der CLI (Terminal oder REPL) verwenden möchten, laden Sie babel-cli herunter, wenn Sie es im Knoten verwenden möchten, laden Sie babel-core herunter. Wenn Sie die Methode vor Babel 6 noch verwenden, um ES6 zu konvertieren, wird sie unverändert ausgegeben und nicht konvertiert, da Sie ein Plug-in installieren müssen. Wenn Sie Pfeilfunktionen verwenden möchten, müssen Sie das Pfeilfunktions-Plug-in npm install babel-plugin-transform-es2015-arrow-functions installieren.

In diesem Artikel werden wir nicht die Syntaxfunktionen von ES6 diskutieren, sondern uns darauf konzentrieren, wie man ES6-Code in ES5-Code konvertiert.

Babel-Transkodierung:

Wenn Sie ES6 noch nicht kennengelernt haben, müssen Sie ein wenig verwirrt sein, wenn Sie den folgenden Code sehen (Was zum Teufel ist das? Zehntausend mythische Bestien rasen in Ihrem Herzen vorbei ) ), aber Sie haben richtig gelesen, das ist ES6. Ob Sie es sehen oder nicht, es ist hier.

var a = (msg) => () => msg;
 
var bobo = {
  _name: "BoBo",
  _friends: [],
  printFriends() {
    this._friends.forEach(f =>
      console.log(this._name + " knows " + f));
  }
};

Tatsächlich wird der obige Code nach der Konvertierung durch Babel zu:

"use strict";
 
var a = function a(msg) {
  return function () {
    return msg;
  };
};
 
var bobo = {
  _name: "BoBo",
  _friends: [],
  printFriends: function printFriends() {
    var _this = this;
 
    this._friends.forEach(function (f) {
      return console.log(_this._name + " knows " + f);
    });
  }
};

Okay, kommen wir zurück zum Thema und probieren einige Methoden aus, um den oben genannten Transcodierungseffekt zu erzielen.

1. Babel-Methode direkt installieren:

1.1) Installieren Sie Babel zunächst global.

$ npm install -g babel-cli
 
//也可以通过直接将Babel安装到项目中，在项目根目录下执行下面命令，同时它会自动在package.json文件中的devDependencies中加入babel-cli
//在执行安装到项目中命令之前，要先在项目根目录下新建一个package.json文件。
$ npm install -g babel-cli --save-dev

Wenn Sie babel direkt in Ihrem Projekt installieren, wird babel-cli automatisch zu den devDependencies in der Datei package.json hinzugefügt. Wie unten gezeigt:

	//......
	{
	  "devDependencies": {
	    "babel-cli": "^6.22.2"
	  }
	}

1.2) Die Konfigurationsdatei von Babel ist .babelrc und wird im Stammverzeichnis des Projekts gespeichert. Der erste Schritt bei der Verwendung von Babel besteht darin, diese Datei zu konfigurieren.

Der vollständige Dateiname dieser Datei lautet „.babelrc“, bitte beachten Sie, dass am Anfang ein „.“ steht. Da mein Computer ein Windows-System ist, erhalte ich beim Erstellen dieser Datei immer die Fehlermeldung „Sie müssen den Dateinamen eingeben.“ Später habe ich gegoogelt und festgestellt, dass ich beim Erstellen dieser Datei den Dateinamen in „.babelrc“ geändert habe. Beachten Sie, dass davor und danach ein Punkt steht, damit sie erfolgreich gespeichert werden kann

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

1.3) Legen Sie fest Transkodierungsregeln im Voreinstellungsfeld. Der Beamte stellt die folgenden Regelsätze bereit, die Sie entsprechend Ihren Anforderungen installieren können.

Klicken Sie hier, um zur Konfigurationsseite für die Voreinstellungen der offiziellen Website von Babel Chinese zu gelangen: Babel-Plugins

	# ES2015转码规则
	$ npm install --save-dev babel-preset-es2015

	# react转码规则
	$ npm install --save-dev babel-preset-react

	# ES7不同阶段语法提案的转码规则（共有4个阶段），选装一个
	$ npm install --save-dev babel-preset-stage-0
	$ npm install --save-dev babel-preset-stage-1
	$ npm install --save-dev babel-preset-stage-2
	$ npm install --save-dev babel-preset-stage-3

1.4) Gemäß den Anweisungen der offiziellen Website müssen wir diese Regeln hinzufügen, nachdem wir diese Plug-in-Tools mit npm installiert haben .babelrc. Wie unten gezeigt:

	{
	    "presets": [
	      "es2015",
	      "react",
	      "stage-2"
	    ],
	    "plugins": []
	  }

1.5) Transkodierung und Transkodierungsregeln:

	# 转码结果输出到标准输出
	$ babel test.js

	# 转码结果写入一个文件
	# --out-file 或 -o 参数指定输出文件
	$ babel a.js --out-file b.js
	# 或者
	$ babel a.js -o b.js

	# 整个目录转码
	# --out-dir 或 -d 参数指定输出目录
	$ babel src --out-dir lib
	# 或者
	$ babel src -d lib

	# -s 参数生成source map文件
	$ babel src -d lib -s

2. Tool-Konfigurationsmethode:

Tatsächlich können wir die ES6-Transkodierungskonfiguration über viele Front-End-Automatisierungstools implementieren, wie z. B. Common Grunt, gulp, Webpack und Node usw. Im Folgenden werde ich kurz auf die Gulp-Konfigurationsmethode eingehen, mit der ich besser vertraut bin.

Klicken Sie hier, um zur offiziellen Website von Babel Chinese zu gelangen. Tool-Konfigurationsseite: Babel Tool

2.1) Zuerst müssen wir gulp im Projekt installieren:

	$ npm install gulp --save-dev

2.2) Dann müssen wir gulp-babel im Projekt installieren :

	$ npm install --save-dev gulp-babel

Dang Nach dem Ausführen der beiden oben genannten Befehle werden wir feststellen, dass der Inhalt der Datei package.json im Stammverzeichnis automatisch geändert wurde in:

	{
	  "devDependencies": {
	    "babel-cli": "^6.22.2",
	    "gulp": "^3.9.1",
	    "gulp-babel": "^6.1.2"
	  }
	}

2.3) Schreiben Sie den Inhalt der Datei gulpfile.js Die Datei lautet wie folgt:

	var gulp = require("gulp");
	var babel = require("gulp-babel");

	gulp.task("default", function () {
	  return gulp.src("src/a.js")
	    .pipe(babel())
	    .pipe(gulp.dest("lib"));
	});

Wenn wir den folgenden Befehl im aktuellen Projektverzeichnis ausführen, werden Sie feststellen, dass die a.js-Datei ursprünglich im src-Ordner (nach ES6-Standards geschrieben) in den ES5-Standard transkodiert wurde a.js und im lib-Ordner abgelegt.

	$ gulp default

	#或者用下面的命令也行
	$ gulp

【Verwandte Empfehlungen: Javascript-Video-Tutorial, Programmiervideo】

Das obige ist der detaillierte Inhalt vonKann Babel ES6 in ES5 konvertieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!