Verwendung der neuesten JavaScript-Funktionen in jedem Browser

JavaScript ist eine Sprache, die sich sehr schnell entwickelt, und manchmal möchten wir die neuesten Funktionen verwenden. Wenn unser Browser oder unsere Umgebung dies jedoch nicht direkt zulässt, müssen wir sie transpilieren, damit dies geschieht.



Transpiling ist die Umwandlung von in einer Sprache geschriebenem Quellcode in eine andere Sprache mit einem vergleichbaren Abstraktionsgrad. Daher verwendet der Transpiler im Fall von JavaScript eine Syntax, die ältere Browser nicht verstehen, und wandelt sie in eine Syntax um, die sie verstehen.

Polyfilling vs. Transpiling

Beide Methoden funktionieren für denselben Zweck: Wir können Code schreiben, der neue Funktionen verwendet, die nicht in unserer Zielumgebung implementiert sind, und dann eine dieser Methoden anwenden.



Eine Polyfüllung ist ein Code, der moderne Funktionen implementiert, sodass sie auf ältere Versionen des Browsers angewendet werden können.



Transpiling ist eine Kombination aus zwei Wörtern: transformieren - transformieren und kompilieren

- kompilieren. Manchmal kann eine neue Syntax mit Polyfills nicht implementiert werden. In diesem Fall verwenden wir einen Transpiler.



Stellen wir uns vor, wir verwenden einen alten Browser, der die Number.isNaN- Funktion nicht unterstützteingeführt in der ES6-Spezifikation. Um diese Funktion nutzen zu können, müssen wir eine Polyfüllung für diese Methode erstellen, die wir jedoch nur benötigen, wenn sie nicht bereits im Browser verfügbar ist.



Zu diesem Zweck erstellen wir eine Funktion, die das Verhalten der isNaN- Funktion nachahmt , und fügen sie der Number-Eigenschaft des Prototyps hinzu.

//  isNaN
if (!Number.isNan) {//  .
    Number.prototype.isNaN = function isNaN(n) {
        return n !== n;
    };
}
let myNumber = 100;
console.log(myNumber.isNaN(100));

Wir werden jetzt den Code für die neu erstellte Funktion transpilieren. Stellen wir uns vor, dass die meisten Browser diese Funktion nicht erfüllen können. In diesem Fall können wir keine Polyfüllung erstellen, um das Verhalten zu simulieren. Wir möchten den folgenden Code in Internet Explorer 11 ausführen, also werden wir ihn mit einem Transpiler konvertieren:

class mySuperClass {
  constructor(name) {
    this.name = name;
  }
hello() {
    return "Hello:" +this.name;
  }
}
const mySuperClassInstance = new mySuperClass("Rick");
console.log(mySuperClassInstance.hello()); 
//Hello Rick

Der resultierende Code wurde mit dem Online-Transpiler von Babel portiert und kann jetzt in Internet Explorer 11 ausgeführt werden:

"use strict";
function _instanceof(left, right) { if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) { return !!right[Symbol.hasInstance](left); } else { return left instanceof right; } }
function _classCallCheck(instance, Constructor) { if (!_instanceof(instance, Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
var mySuperClass = /*#__PURE__*/function () {
  function mySuperClass(name) {
    _classCallCheck(this, mySuperClass);
this.name = name;
  }
_createClass(mySuperClass, [{
    key: "hello",
    value: function hello() {
      return "Hello:" + this.name;
    }
  }]);
return mySuperClass;
}();
var mySuperClassInstance = new mySuperClass("Rick");
console.log(mySuperClassInstance.hello()); //Hello Rick

Einer der häufigsten JavaScript-Transpiler ist Babel. Babel ist ein Tool, das entwickelt wurde, um Ihren Code zwischen verschiedenen JavaScript-Versionen zu portieren. Es kann über den Node Package Manager (npm) installiert werden.



Babel ist zum Standard für das Kompilieren von ECMAScript-Anwendungen in eine Version von ECMAScript geworden, die in Browsern funktioniert, die solche Anwendungen nicht unterstützen. Babel kann andere Versionen von ECMAScript wie React JSX kompilieren.



In den nächsten Schritten erfahren Sie, wie Sie mit Babel die vorherige mySuperMethod- Klasse auf einem Linux-Computer mit der alten Node.js- Datei transpilieren und ausführen . Unter anderen Betriebssystemen wie Windows 10 oder macOS sind die Schritte ähnlich.



Hinweis. Auf Ihrem Computer muss Node.js installiert sein . Npm wurde als Funktion zum Node.js-Installationsprogramm hinzugefügt.



1. Öffnen Sie eine Eingabeaufforderung und erstellen Sie ein Verzeichnis mit dem Namen babelExample:

/mkdir babelExample
/cd babelExample

2. Erstellen Sie ein npm- Projekt und behalten Sie die Standardeinstellungen bei. Der folgende Befehl erstellt eine Datei mit dem Namen package.json:

npm init

Screenshot des Inhalts der Datei package.json nach Ausführung des Befehls npm init



Hier ist index.js (Dateiname kann unterschiedlich sein) der Einstiegspunkt in unsere Anwendung. Hier werden wir unseren Javascript-Code einfügen. Erstellen Sie also eine index.js-Datei und fügen Sie den folgenden Code ein:

class mySuperClass {
  constructor(name) {
    this.name = name;
  }
hello() {
    return "Hello:" +this.name;
  }
}
const mySuperClassInstance = new mySuperClass("Rick");
console.log(mySuperClassInstance.hello()); 
//Hello Rick

3. Während wir Babel CLI global installieren können, ist es am besten, dies Projekt für Projekt lokal durchzuführen. Mit dem folgenden Befehl wird das Verzeichnis node_modules hinzugefügt und die Datei package.json geändert, um Babel-Abhängigkeiten hinzuzufügen:

npm install -save-dev @babel/core @babel/cli

Screenshot von package.json mit Babel-Abhängigkeiten



4. Fügen Sie die Konfigurationsdatei .babelrc zum Projektstamm hinzu und fügen Sie Plugins für ES2015 + -Transformationen hinzu.



Hinweis. In Babel ist jeder Transformator ein Plugin, das wir einzeln installieren können. Jedes Preset ist eine Sammlung verwandter Plugins. Mit Presets müssen wir nicht Dutzende von Plugins selbst installieren und aktualisieren.



Legen Sie eine Voreinstellung für alle ES6-Funktionen fest (enthält eine Gruppe von Plugins):

npm install @babel/preset-env --save-dev

Screenshot von package.json mit Preset-Env-Babel-Abhängigkeit



Bearbeiten Sie die .babelrc-Datei und fügen Sie eine Konfiguration hinzu, die Transformationen für ES6 enthält.



Schreiben Sie den folgenden Code in Ihre .babelrc-Datei:

{
  "presets": ["@babel/preset-env"]
}

5. Verwendungshinweis



. Wenn Sie Windows 10 PowerShell verwenden, achten Sie beim Codieren Ihrer Dateien darauf, dass beim Starten von Babel Analysefehler auftreten können. Es ist wünschenswert, dass die Dateien in UTF-8-Codierung vorliegen.



input: index.js

output: out folder (Babel lässt die migrierten Dateien hier)



Direkt durch Ausführen des folgenden Befehls in der Konsole:

./node_modules/.bin/babel index.js -d out

Mit einem npm-Skript, das Ihrer package.json-Datei die folgende Zeile hinzufügt:

"build": "babel index.js -d out"

Screenshot des Inhalts der Datei package.json nach dem Hinzufügen des Build-Skripts



Führen Sie den folgenden Befehl aus:

npm run build

In beiden Fällen erhalten Sie im Ordner out eine Datei (oder Dateien), die in einen einsatzbereiten Browser übertragen wurde, der die ES6-Klassensyntax nicht unterstützt. Der Code lautet:

"use strict";
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
var mySuperClass = /*#__PURE__*/function () {
  function mySuperClass(name) {
    _classCallCheck(this, mySuperClass);
this.name = name;
  }
_createClass(mySuperClass, [{
    key: "hello",
    value: function hello() {
      return "Hello:" + this.name;
    }
  }]);
return mySuperClass;
}();
var mySuperClassInstance = new mySuperClass("Rick");
console.log(mySuperClassInstance.hello());

Fazit

Die JavaScript-Sprache ändert sich ständig. Dank dieser Tools können wir Code mit neuer Syntax und neuen Funktionen schreiben, die noch nicht in allen Browserversionen implementiert wurden.



Ich hoffe, Ihnen hat dieser Artikel gefallen. Ich sende diesen und viele andere nützliche Artikel für Anfänger-Frontend-Entwickler auf dem Frontend.school () -Telegrammkanal , wo ich auch nützliche Tests vorbereite, um mein Wissen zu testen. Ich mache Sie darauf aufmerksam, dass der Kanal ein reines Hobby und ein Wunsch zu helfen ist und mir keine materiellen Vorteile bringt.