"Unerwarteter Token-Import" in Nodejs5 und Babel?

192

In js Datei habe ich Import verwendet, anstatt zu erfordern

import co from 'co';

Ich habe versucht, es direkt von nodejs auszuführen, da der Import "Versandfunktionen" und Unterstützung ohne Laufzeitflag ( https://nodejs.org/en/docs/es6/ ) ist, aber ich habe einen Fehler erhalten

import co from 'co';
^^^^^^

SyntaxError: Unexpected token import

Dann habe ich versucht, Babel zu benutzen

npm install -g babel-core
npm install -g babel-cli
npm install babel-core //install to babel locally, is it necessary?

und laufen vorbei

babel-node js.js

Haben Sie immer noch den gleichen Fehler, unerwarteten Token-Import?

Wie könnte ich es loswerden?

jovi
quelle
14
@FelixKling: Obwohl die Antwort auf die verknüpfte Frage sicherlich auch diese Frage beantwortet, ist es schwierig, diese Frage als Duplikat dieser Frage zu sehen. Auf jeden Fall war ich froh, diesen hier zu haben, da Google mich direkt hierher gebracht hat, weil der beschriebene Syntaxfehler genau mit dem übereinstimmte, was ich gesehen habe. Ich bin ehrlich froh, dass das OP dies gepostet hat, anstatt nach einer etwas verwandten Frage mit einer passenden Antwort zu suchen.
Scott Sauyet
3
npm i --save-dev babel-cli Es wurde für mich
behoben
2
Ich stimme dafür, dies als Duplikat zu markieren. Ich halte dies für eine separate Frage.
TWR Cole
3
Dies ist kein Duplikat. Eine andere Lösung, die ich veröffentlichen möchte, besteht darin, zu überprüfen, ob Sie dieses Plugin haben .babelrc: "transform-es2015-modules-commonjs".
Dan Dascalescu
7
Duplikate sind (sollten) in Ordnung. Es ist ein wichtiger Teil der Arbeitsweise von Menschen. Was @ScottSauyet sagt, ist einer der Gründe. Unterschiedliche Erklärungen mit unterschiedlichen Perspektiven sind andere. Diese ganze "doppelte Jagd" fühlt sich für mich als reguar-Besucher seit Jahren sehr wenig hilfreich an. Ich wünschte, es würde aufhören.
Stijn de Witt

Antworten:

202

Aus dem Babel 6 Versionshinweise:

Da sich Babel darauf konzentriert, eine Plattform für JavaScript-Tools und kein ES2015-Transpiler zu sein, haben wir uns entschlossen, alle Plugins zu aktivieren. Dies bedeutet, dass bei der Installation von Babel Ihr ES2015-Code standardmäßig nicht mehr transpiliert wird.

In meinem Setup habe ich die Voreinstellung es2015 installiert

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

oder mit Garn

yarn add babel-preset-es2015 --dev

und aktivierte die Voreinstellung in meiner .babelrc

{
  "presets": ["es2015"]
}
Laurence Bortfeld
quelle
14
Gute Antwort. Leider müssen Sie require () weiterhin verwenden und können den Import nicht für npm-Pakete verwenden.
Jagtesh Chadha
24
Ich benutze babel-nodezusammen mit es2015und reactPresets. Gleicher Fehler.
FuzzY
3
Funktioniert nicht. Ja, das wird benötigt, aber der Import funktioniert nicht.
still_dreaming_1
6
Für mich war es eine einfache Lösung. Ich war in Tunnel Vision verwickelt, als ich versuchte, Code von einem React / Babel-Projekt in ein anderes es5-Projekt anzupassen und gleichzeitig auf die es6-Syntax zu aktualisieren. In meiner package.json unter Skripten habe ich vergessen, "node run" durch "babel-node run.js" zu ersetzen. Ja, ich fühle mich verlegen. :)
joezen777
2
JS Ökosystem ist so einfach
Rodrigo
51

Bis zur Implementierung von Modulen können Sie den Babel "Transpiler" verwenden, um Ihren Code auszuführen:

npm install --save babel-cli babel-preset-node6

und dann

./node_modules/babel-cli/bin/babel-node.js --presets node6 ./your_script.js

Wenn Sie nicht --presets node6eingeben möchten, können Sie die .babelrc-Datei speichern durch:

{
  "presets": [
    "node6"
  ]
}

Siehe https://www.npmjs.com/package/babel-preset-node6 und https://babeljs.io/docs/usage/cli/

Vincent Mathew
quelle
16
Die neueste Empfehlung der Babel-Leute ist, Babel-Preset-Env zu verwenden, das erkennt, welche Polyfills ausgeführt werden sollen, anstatt babel-preset-node*. In .babelrcGebrauch:{ "presets": [ ["env", { "targets": { "node": "current" } }] ] }
Ronen
Danach bekam ich den Fehler (nicht erkanntes Token '<'): server.js:Unexpected token (37:12) 35 | const initialState = store.getState(); 36 | const componentHTML = renderToString( > 37 | <Provider store={store}> | ^ 38 | <RouterContext {...props} /> 39 | </Provider>, 40 | );
AK
26
  1. Installieren von Paketen: babel-core, babel-polyfill,babel-preset-es2015
  2. .babelrcMit Inhalten erstellen :{ "presets": ["es2015"] }
  3. Nicht setzen importAnweisung in der Haupteintragsdatei, verwenden Sie eine andere Datei zB: app.jsIhre Haupteintrag Datei erforderlich ist babel-core/registerund babel-polyfillmachen babel arbeitet separat an der ersten Stelle , bevor irgendetwas anderes. Dann können Sie eine app.jswhere- importAnweisung verlangen .

Beispiel:

index.js

require('babel-core/register');
require('babel-polyfill');
require('./app');

app.js.

import co from 'co';

Es sollte funktionieren mit node index.js.

Adiono
quelle
1
Dies ist eine einfache Problemumgehung, die für die Entwicklung verwendet werden kann. Obwohl Sie für die Produktion immer Ihren es5-Code kompilieren sollten.
Jonas Drotleff
Warten Sie ... ist es das, was ich denke? Vor ein paar Monaten hatte ich den Traum, dass Javascript / Perl / jede Sprache ohne Aktualisierungen durch benutzerdefiniertes zusätzliches Parsen der vorhandenen Sprache in derselben Sprache erweitert werden könnte. Ist das was hier los ist ???
Dmitry
Hervorragende Antwort. Aber in die Skripte können Sie so etwas wie unten setzen. So können Sie in jeder Datei verwenden. "scripts": {"build": "babel src -d dist", "start": "node dist / index.js"}
gkarthiks
15

babel-preset-es2015 ist jetzt veraltet und Sie erhalten eine Warnung, wenn Sie versuchen, die Lösung von Laurence zu verwenden.

Verwenden Sie babel-preset-envstattdessen Folgendes, um dies mit Babel 6.24.1+ zum Laufen zu bringen:

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

Fügen Sie envdann Ihren Voreinstellungen Folgendes hinzu .babelrc:

{
  "presets": ["env"]
}

Weitere Informationen finden Sie in den Babel-Dokumenten .

kristina
quelle
Gibt es eine Möglichkeit, dies mit der CLI zu tun?
JCollum
6

Wenn Sie die Voreinstellung für React-Native verwenden, wird der Import akzeptiert

npm i babel-preset-react-native --save-dev

und legen Sie es in Ihre .babelrc-Datei

{
  "presets": ["react-native"]
}

in Ihrem Projektstammverzeichnis

https://www.npmjs.com/package/babel-preset-react-native

jde-chil
quelle
5

Möglicherweise führen Sie nicht kompilierte Dateien aus. Fangen wir sauber an!

Erstellen Sie in Ihrem Arbeitsverzeichnis:

  • Zwei Ordner. Eine für vorkompilierten es2015-Code. Die andere für die Ausgabe von babel. Wir werden sie "src" bzw. "lib" nennen.
  • Eine package.json-Datei mit dem folgenden Objekt:

    { 
      "scripts": {
          "transpile-es2015": "babel src -d lib"
      },
      "devDependencies": {
          "babel-cli": "^6.18.0",
          "babel-preset-latest": "^6.16.0"
      }
    }
  • Eine Datei mit dem Namen ".babelrc" mit den folgenden Anweisungen: {"presets": ["latest"]}

  • Zuletzt schreiben Sie Testcode in Ihre Datei src / index.js. In deinem Fall: import co from 'co'.

Über Ihre Konsole:

  • Installieren Sie Ihre Pakete: npm install
  • Transpilieren Sie Ihr Quellverzeichnis in Ihr Ausgabeverzeichnis mit dem Flag -d (auch bekannt als --out-dir), wie bereits in unserer package.json angegeben: npm run transpile-es2015
  • Führen Sie Ihren Code aus dem Ausgabeverzeichnis aus! node lib/index.js
MarbinJavier
quelle
Hat leider nicht funktioniert. Unexpected token import.
dipole_moment
1
Stellen Sie sicher, dass sich der babelBefehl in Ihrem Suchpfad befindet. Hier ist eine kleine Variation. package.json: {"scripts": {"transpile": "./node_modules/.bin/babel src -d lib"}, "devDependencies": {"babel-cli": "^ 6.24.1", "babel-preset-" env ":" ^ 1.6.0 "}} .babelrc: {" presets ": [" env "]}
Maksim Yegorov
5

Aktuelle Methode ist zu verwenden:

npm install --save-dev babel-cli babel-preset-env

Und dann rein in .babelrc

{
    "presets": ["env"]
}

Diese Installation Babel-Unterstützung für die neueste Version von js (es2015 und höher) Schauen Sie sich babeljs an

Vergessen Sie nicht babel-node, Ihre Skripte innerhalb der package.jsonVerwendung hinzuzufügen , wenn Sie Ihre js-Datei wie folgt ausführen.

"scripts": {
   "test": "mocha",
    //Add this line to your scripts
   "populate": "node_modules/babel-cli/bin/babel-node.js" 
},

Jetzt können Sie npm populate yourfile.jsim Terminal.

Wenn Sie Windows ausführen und einen internen oder externen Fehlerbefehl ausführen, der nicht erkannt wird, verwenden Sie den Knoten vor dem Skript wie folgt

node node_modules/babel-cli/bin/babel-node.js

Dann npm run populate

Isaac Sekamatte
quelle
3

Sie müssen babel- preset -env und nodemon zum Hot-Reload verwenden.

Erstellen Sie dann eine .babelrc-Datei mit folgendem Inhalt:

{
  "presets": ["env"]
}

Erstellen Sie schließlich ein Skript in package.json:

"scripts": {
    "babel-node": "babel-node --presets=env",
    "start": "nodemon --exec npm run babel-node -- ./index.js",
    "build": "babel src -d dist"
  }

Oder verwenden Sie einfach diese Boilerplate:

Boilerplate: node-es6

Priyanshu Chauhan
quelle
2
  • install -> "npm i --save-dev babel-cli babel-preset-es2015 babel-preset-stage-0"

Als nächstes fügen Sie in der Datei package.json die Skripte "start" hinzu: "babel-node server.js"

    {
  "name": "node",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "dependencies": {
    "body-parser": "^1.18.2",
    "express": "^4.16.2",
    "lodash": "^4.17.4",
    "mongoose": "^5.0.1"
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "babel-node server.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

und erstelle eine Datei für babel im Stammverzeichnis ".babelrc"

    {
    "presets":[
        "es2015",
        "stage-0"
    ]
}

und führen Sie npm start im Terminal aus

lior ben yosef
quelle
1

Führen Sie die folgenden Schritte aus, um das Problem zu beheben:

1) Installieren Sie die CLI- und env-Voreinstellung

$ npm install --save-dev babel-cli babel-preset-env

2) Erstellen Sie eine .babelrc- Datei

{
  "presets": ["env"]
}

3) Konfigurieren Sie npm start in package.json

"scripts": {
    "start": "babel-node ./server/app.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  }

4) Starten Sie dann die App

$ npm start
KARTHIKEYAN.A
quelle
0

Ich habe Folgendes getan, um das Problem zu beheben (ex.js-Skript)

Problem

$ cat ex.js
import { Stack } from 'es-collections';
console.log("Successfully Imported");

$ node ex.js
/Users/nsaboo/ex.js:1
(function (exports, require, module, __filename, __dirname) { import { Stack } from 'es-collections';
                                                              ^^^^^^

SyntaxError: Unexpected token import
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:152:10)
    at Module._compile (module.js:624:28)
    at Object.Module._extensions..js (module.js:671:10)
    at Module.load (module.js:573:32)
    at tryModuleLoad (module.js:513:12)
    at Function.Module._load (module.js:505:3)
    at Function.Module.runMain (module.js:701:10)
    at startup (bootstrap_node.js:194:16)
    at bootstrap_node.js:618:3

Lösung

# npm package installation
npm install --save-dev babel-preset-env babel-cli es-collections

# .babelrc setup
$ cat .babelrc
{
  "presets": [
    ["env", {
      "targets": {
        "node": "current"
      }
    }]
  ]
}

# execution with node
$ npx babel ex.js --out-file ex-new.js
$ node ex-new.js
Successfully Imported

# or execution with babel-node
$ babel-node ex.js
Successfully Imported
nsaboo
quelle
0

@jovi alles was Sie tun müssen, ist .babelrc Datei wie folgt hinzuzufügen:

{
  "plugins": [
    "transform-strict-mode",
    "transform-es2015-modules-commonjs",
    "transform-es2015-spread",
    "transform-es2015-destructuring",
    "transform-es2015-parameters"
  ]
}

und installieren Sie diese Plugins als devdependences mit npm.

dann versuchen Sie es erneut mit babel-node ***. js. hoffe das kann dir helfen.

高 建德
quelle
-4

In Ihrer App müssen Sie Ihre require()Module deklarieren , ohne das Schlüsselwort 'import' zu verwenden:

const app = require("example_dependency");

Erstellen Sie dann eine .babelrc-Datei:

{
"presets": [ 
    ["es2015", { "modules": false }]
]
}

Dann müssen Sie in Ihrer gulpfile Ihre require()Module deklarieren :

var gulp = require("gulp");
anycoloryoulike84
quelle