Ein weit verbreiteter Transcoder – Babel

Referenz:

Babel

Babel ist ein weit verbreiteter Transcoder, der ES6-Code in ES5-Code konvertieren kann und so die Ausführung bestehender Umgebungen ermöglicht

// 转码前
input.map(item => item + 1);// 转码后
input.map(function (item) {  return item + 1;});

Konfigurationsdatei

---

Konfiguration Die Datei ist .babelrc und wird im Stammverzeichnis des Projekts gespeichert. Der erste Schritt zur Verwendung von Babel besteht darin, diese Datei

<span style="color: #888888"><code class=" language-javascript"><span class="token punctuation">{  <span class="token string">"presets"<span class="token punctuation">: <span class="token punctuation">[<span class="token punctuation">]<span class="token punctuation">,  <span class="token string">"plugins"<span class="token punctuation">: <span class="token punctuation">[<span class="token punctuation">]<span class="token punctuation">}<br/><br/><strong><code>presets</code>字段  </strong>设定转码规则，官方提供以下的规则集，你可以根据需要安装<br/></span></span></span></span></span></span></span></span></span></span></span></code></span>

# 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

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

babel-register

---

zu konfigurieren

Das Modul „babel-register“ schreibt den Befehl „require“ neu und fügt ihm einen Hook hinzu. Wenn Sie von da an „require“ verwenden, um Dateien mit den Suffixen .js, .jsx, .es und .es6 zu laden, werden diese zuerst mit Babel transkodiert

　$ npm install --save - dev babel-register

Bei Verwendung muss babel-register zuerst geladen werden

require("babel-register");

require("./index.js?1.1.11");

Dann besteht keine Notwendigkeit, index.js manuell zu transkodieren.

Es ist zu beachten, dass babel-register nur die durch den Befehl require geladene Datei transkodiert, nicht die aktuelle Datei. Da es sich außerdem um Echtzeit-Transkodierung handelt, ist es nur für den Einsatz in der Entwicklungsumgebung

babel-core

---

Wenn ein Code die API von Babel zur Transkodierung aufrufen muss, muss das Modul babel-core verwendet werden.

Installationsbefehl: $ npm install babel-core --save , Dann kann babel-core im Projekt aufgerufen werden.

var babel = require('babel-core');

// String-Transkodierung
babel.transform('code();', options);
// => { code, map, ast }

//Dateitranskodierung (asynchron)
babel.transformFile('filename.js', options, function(err, result) {
result ; // => { code, map, ast }
});

// Dateitranskodierung (synchron)
babel.transformFileSync('filename.js', options);
// => { code, map, ast }

// Babel AST Transkodierung
babel.transformFromAst(ast, code, options);
// => { code, map, ast }

Konfigurieren Sie Objektoptionen. Sie können sich auf das offizielle Dokument http://babeljs.io/docs/usage/options/ beziehen.

Unten finden Sie eine Beispiel.

var es6Code = 'let x = n => n + 1';
var es5Code = require('babel-core').transform(es6Code, {
presets: ['es2015']
})
Im obigen Code ist der erste Parameter der Transformationsmethode a Eine Zeichenfolge, die den ES6-Code darstellt, der konvertiert werden muss. Der zweite Parameter ist das konvertierte Konfigurationsobjekt.

babel-polyfill

---

Babel konvertiert nur neue Standardmäßig JavaScript-Syntax (Syntax), ohne neue APIs zu konvertieren, z. B. Iterator, Generator, Set, Maps, Proxy, Reflect, Symbol, Promise und andere globale Objekte sowie einige für globale Objekte definierte Methoden (z. B. Object.assign). Wird nicht transkodiert.

Lösung: Verwenden Sie babel-polyfill, um eine Unterlage für die aktuelle Umgebung bereitzustellen

$ npm install --save babel-polyfill

Fügen Sie im Kopf des Skripts die folgende Codezeile hinzu:

import 'babel-polyfill';
// oder
require('babel-polyfill');

Das obige ist der detaillierte Inhalt vonEin weit verbreiteter Transcoder – Babel. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!