"Unerwarteter Token-Import" in Nodejs5 und Babel?

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?

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"]
}

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/

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.

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 .

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

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

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

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

• 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

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

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

@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.

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");