WebStorm mit Babel funktioniert nicht mit Importanweisungen

Question

Ich benutze WebStorm 2017.1.3, obwohl auch mit neuesten EAP versucht, und ich kann nicht import from Anweisung zu arbeiten. Ich halte nur die folgende Fehlermeldung erhalten:

import Utils from './utils' 
^^^^^^ 

SyntaxError: Unexpected token import 

In meinem packages.json ich habe babel-cli, babel-preset-env und babel-preset-es2015 definiert. Ich habe verschiedene Blogposts und Videos verfolgt, aber immer noch denselben Fehler.

ES6 ist in den Einstellungen aktiviert und ich habe versucht, Babel Dateiwatch laut Dokumentation hinzuzufügen, aber nichts scheint zu funktionieren. Das fühlt sich an, als sollte es viel einfacher sein und einfach funktionieren, also muss ich einen wichtigen Teil des Puzzlespiels vermissen.

Hat jemand eine Arbeit Schritt für Schritt, von frischem Projekt, wie bei der Konfiguration von Webstorm zu arbeiten mit import?

Einige Orte sagen, verwenden Sie Dateiüberwachung, andere sagen, nur um Projektkonfiguration Interpreter zu ändern, um babel-node zu verwenden. Andere sagen müssen Gulp verwenden ... sehr verwirrend.

Vielen Dank. fLo

Answer 1

Um die Dinge zu verdeutlichen: Hier geht es nicht um die Konfiguration von WebStorm, der Fehler kommt vom Node.js-Interpreter, der Ihren Code ausführt. Node.js unterstützt ES6-Module immer noch nicht nativ (tatsächlich unterstützt keine JavaScript-Laufzeit sie derzeit - ECMAScript definiert keine "Loader" -Spezifikation, die bestimmt, wie Module in die Laufzeitumgebung eingefügt werden. Die Loader-Spezifikation wird jedoch von WHATWG definiert ist noch nicht abgeschlossen). Um ES6-Importe/Exporte zu akzeptieren, müssen Sie also transpilers verwenden. Aktuelle Industriestandard ist Babel

Die einfachste Art und Weise es Arbeit zu machen, ist die folgende:

• installieren babel in Ihrem Projekt npm install --save-dev babel-cli babel-preset-env

• eine .babelrc Datei im Projekt-root-Verzeichnis erstellen:

  { "Voreinstellungen": [ "env"]}

• in Ihrer Node.js R un Konfiguration passieren -r babel-register Knoten:

Mit dieser Konfiguration wird der Code von Babel transpiled on-the-fly, keine Datei-Beobachter sind usw. benötigt