wake-up-neo.com

Wie richte ich Babel 6 mit Node JS ein, um ES6 in meinem serverseitigen Code zu verwenden?

Ich habe die Dokumentation unter Node API Babel 6 Docs mehrmals gelesen.

Ich beginne mit dem Erlernen von pg-Versprechen, indem ich dem Lernprogramm Learn by Example folge, und würde es vorziehen, mit ES6 zu arbeiten und mit Babel auf ES5 zu transpilieren, bin mir jedoch einiger Dinge nicht sicher:

  1. Welches Preset verwende ich nach der Installation von babel-core und wo/wie konfiguriere ich es?

Die Dokumentation war mir unklar, in welche Datei ich: require ("babel-core"). Transform ("code", options); und welche Teile dieses Codes Platzhalter sind. Wenn ich diesen Code verwende, verwende ich ihn nur einmal und kann dann ES6 in jeder anderen Datei verwenden? Wie würde dies erreicht werden?

  1. Ich habe über diese .babelrc-Datei gelesen und möchte bestätigen, ob der tatsächliche Dateiname ".babelrc" ist oder ob dies nur die Dateierweiterung ist und wo ich diese Datei in Bezug auf das Stammverzeichnis meines Projekts ablege Ich verlinke darauf?

  2. Wenn ich pg-promise verwende, sollte ich ES6 und Babel verwenden oder npm installieren, wie im Abschnitt Testing für pg beschrieben -Versprechen Sie, dass es ausreicht und der Versuch, ES6 zu verwenden, weitere Probleme verursacht?

Ich hatte gehofft, let und const nutzen zu können, falls dies während meiner serverseitigen Entwicklung erforderlich wurde.

  1. Gibt es eine Standard-Dateistruktur für ein Node + Babel + PG-Versprechen-Server-Setup?

Edit Bemerkenswert ist, dass ich auch Node JS mit Babel-Node gelesen habe und gesehen habe, dass dies vermieden werden sollte. Die letzte Antwort ganz unten ergab aus ähnlichen Gründen keinen Sinn für mich. Ich habe Probleme, die von Babel zur Verfügung gestellten Unterlagen zu befolgen.

34
Jax Cavalera

1.a Was Preset wird benötigt?

Sie müssen Babel zunächst mit npm install babel-core --save-dev Im Stammverzeichnis Ihres Projekts mithilfe eines Terminalfensters wie der Eingabeaufforderung installieren.

Nach der Installation müssen Sie das Preset es2015 mit npm install babel-preset-es2015 --save-dev Installieren. Babel-Core ist Promises/A + -kompatibel , aber nicht ideal für die Verwendung aufgrund einer schlechten Fehlerbehandlung, so dass eine Bibliothek wie Bluebird sein sollte stattdessen für diesen Zweck verwendet. Um zu transpilieren, muss Babel-Core noch installiert werden und es2015 aktiviert ES6-> ES5-Transpiling, sodass Sie ausgefallene Dinge wie let und const usw. verwenden können.

1.b Wo setzen require("babel-core");?

verwenden Sie stattdessen require("babel-core/register"); und platzieren Sie es in Ihrer Entry -Datei, die normalerweise "server.js" heißt. Die Datei server.js muss ausschließlich CommonJS (ES5) verwenden.

Mit der Anweisung "require" werden alle relevanten Transformationen auf den gesamten Code angewendet, der in der Entry -Datei erforderlich ist, und auf alle Dateien, die in dieser Datei erforderlich sind/enthalten sind Dateien.

Sie verweisen auf die Eintragsdatei in package.json im Abschnitt "main":.

Package.json wird erstellt, wenn Sie das Projekt mit npm init Im Stammverzeichnis Ihres Projekts im Terminalfenster initialisieren

Ein Ansatz hierfür wäre:

  • Entry File - server.js
  • server.js - erfordert {babel-core und die ES6-Hauptdatei: config.js/jsx/es6/es}
  • config.es6 - verwendet ES6 und enthält (erfordert) für alle anderen Projektdateien, die ebenfalls ES6 verwenden können, da sie transpiliert werden, indem sie in "config" geladen werden. Datei, die direkt von babel-core transpiliert wird.

2. Was ist .babelrc?

.babelrc Ist der Dateiname und sollte im selben Ordner wie Ihre package.json-Datei abgelegt werden (normalerweise das Stammverzeichnis) und wird automatisch "geladen", wenn Babel-Core benötigt wird, um zu bestimmen, welche Voreinstellung (en) oder Plugins erforderlich sind verwendet werden.

In .babelrc Müssen Sie den folgenden Code hinzufügen:

{
  "presets": ["es2015"]
}

3. pg-Versprechen Testing Abschnitt

Ein direktes Zitat des Entwicklers hat dies kürzlich beantwortet

Sie müssen sich nicht um die Schritte in den Tests kümmern, sondern verwenden nur die Schritte in der Installation. Der in tests bezieht sich auf die dev dependency installation, um tests auszuführen. Das pg-Versprechen kann mit jeder Versprechenbibliothek zusammenarbeiten, die Promises/A + -Spezifikation entspricht.

4. Standard-Datei/Ordner-Struktur für Server Side Projekte?

Es gibt keinen Standard-Weg, um diese Aufgabe zu erreichen, wie jedes Projekt einzigartig Anforderungen hat. Ein guter Ausgangspunkt wäre, die Eintragsdatei im Projektstammverzeichnis abzulegen, die ES6-Konfigurationsdatei in einem "Skript". oder "src" Unterordner und einzelne Komponenten in Ordnern darunter.

z.B.

  • ROOT/server.js
  • ROOT/src/config.es6
  • ROOT/src/Teil1/files.es6
  • ROOT/src/component2/files.es6

In diesem Ort wird Babel transpile erfolgreich alle ES6 bis ES5 und aktivieren Sie die Unterstützung von A + konformen Versprechen.

Um den node.js-Webserver zu verwenden This Guide bietet etwas mehr Einblick, und im Kontext dieser Antwort wird der angezeigte Code in die ES6-Datei config.es6 eingefügt und der folgende Code wird in die ES6-Datei eingefügt Eintrag server.js Datei:

require("babel-core/register");
require("./src/config.es6");

Der Prozess zum Erstellen von isomorphen Webanwendungen unterscheidet sich von diesem Prozess und würde wahrscheinlich Dinge wie Grunzen, Schlucken, Webpacken, Babel-Loader usw. verwenden. Ein weiteres Beispiel hierfür kann hier gefunden sein.

Diese Antwort ist die Kombination mehrerer wichtiger Punkte, die durch andere Antworten auf diese Frage sowie durch Beiträge von erfahrenen Entwicklern und meine eigenen persönlichen Forschungen und Tests bereitgestellt wurden. Vielen Dank an alle, die an der Erstellung dieser Antwort mitgewirkt haben.

45
Jax Cavalera
  1. Diese Antwort wird diese einfache Verzeichnisstruktur

    project/server/src/index.js => Ihre Server-Datei

    project/server/dist/ => Wo babel deine transpilierte datei ablegt

  2. Installieren Sie babel Abhängigkeiten

    npm install -g babel nodemon

    npm install --save-dev babel-core babel-preset-es2015

  3. Fügen Sie diese npm Skripte auf Ihre package.json Datei

    "scripts": { "compile": "babel server/src --out-dir server/dist", "server": "nodemon server/dist/index.js }

  4. Erstellen Sie eine .babelrc Datei in Ihrem Projekt-Stammverzeichnis

    { "presets": "es2015" }

  5. Transpile Ihr Verzeichnis mit

    npm run compile

  6. Führen Sie Ihren Server mit

    npm run server

6
Isaac Pak

Ich denke, dass Sie ein Werkzeug wie Grunzen oder schluck verwenden sollten alle Ihre „Build“ Aufgaben zu verwalten. Es wird automatisieren es für Sie, und Sie werden keine Fehler machen.

In einem Befehl können Sie Ihren Code in babel ES2015 et starten Sie Ihre Anwendung transpile.

Ich schlage vor, Sie einen Blick auf, dieses einfache Projekt . (Nur installieren node_modules und Start npm starten starten die app.js-Datei)

Allerdings, wenn Sie wirklich wollen babel manuell bedienen,

  • .babelrc ist der Name der Datei, können Sie sehen, ein in dieses Projekt (Redux) ein Beispiel haben

  • .babelrc ist eine Konfigurationsdatei, wenn Sie sehen wollen, wie es funktioniert, können Sie überprüfen, diese package.json (immer redux)

  • Es gibt eigentlich kein Standardverfahren, das ich kenne. Sie können das Projekt Skelett verwenden unten, wenn nötig, und senden Pull-Anforderung, sie zu verbessern :-)

0
mfrachet

@mach es einfach

Schritt 1

npm install nodemon --save

Im Projektverzeichnis

Schritt 2

yarn add babel-cli

yarn add babel-preset-es2015

Schritt: 2 In package.json-> scipts Änderung 'Start' auf die folgenden

start: "nodemon src/server.js --exec babel-node --presets es2015"

Schritt 3

yarn start
0
Aslam Shaik