«Importation de jetons inattendue» dans Nodejs5 et babel?


192

Dans le fichier js, j'ai utilisé l'importation vers au lieu d'exiger

import co from 'co';

Et j'ai essayé de l'exécuter directement par nodejs car il disait que l'importation était des `` fonctionnalités d'expédition '' et un support sans aucun indicateur d'exécution ( https://nodejs.org/en/docs/es6/ ), mais j'ai eu une erreur

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

SyntaxError: Unexpected token import

Puis j'ai essayé d'utiliser Babel

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

et dirigé par

babel-node js.js

toujours la même erreur, importation de jeton inattendue?

Comment pourrais-je m'en débarrasser?


14
@FelixKling: Bien que la réponse à la question liée réponde certainement aussi à cette question, il est difficile de voir cette question comme un double de celle-là. Dans tous les cas, j'étais heureux d'avoir celui-ci ici, car Google m'a amené directement ici car l'erreur de syntaxe décrite correspondait exactement à ce que j'ai vu. Je suis honnêtement heureux que le PO ait publié ceci plutôt que de rechercher une question quelque peu liée avec une réponse qui se trouve convenir.
Scott Sauyet

3
npm i --save-dev babel-cli Je l'
ai réparé

2
Je vote pour que cela ne soit pas marqué comme un double, je pense que c'est une question distincte.
TWR Cole

3
Ce n'est pas un doublon. Une autre solution que je voudrais poste est à vérifier que vous avez ce plugin dans .babelrc: "transform-es2015-modules-commonjs".
Dan Dascalescu

7
Les doublons sont (devraient être) ok. C'est une partie importante du fonctionnement des humains. Ce que dit @ScottSauyet est l'une des raisons. Différentes explications avec des perspectives différentes en est une autre. Cette «chasse aux doublons» me semble très inutile en tant que visiteur régulier pendant des années. Je souhaite que cela s'arrête.
Stijn de Witt

Réponses:


203

À partir des notes de publication de babel 6:

Étant donné que Babel se concentre sur le fait d'être une plate-forme pour les outils JavaScript et non un transpilateur ES2015, nous avons décidé d'activer tous les plugins. Cela signifie que lorsque vous installez Babel, il ne transpilera plus votre code ES2015 par défaut.

Dans ma configuration, j'ai installé le préréglage es2015

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

ou avec du fil

yarn add babel-preset-es2015 --dev

et activé le préréglage dans mon .babelrc

{
  "presets": ["es2015"]
}

14
Bonne réponse. Malheureusement, vous devez toujours utiliser require () et ne pouvez pas utiliser import pour les packages npm.
Jagtesh Chadha du

24
Je l'utilise babel-nodeavec es2015et des reactpresets. Même erreur.
FuzzY

3
Ça ne marche pas. Oui, c'est nécessaire, mais cela ne fait pas fonctionner l'importation.
still_dreaming_1

6
Pour moi, c'était une solution simple. J'ai été pris dans une vision tunnel essayant d'adapter le code d'un projet react / babel dans un autre projet es5 et de passer à la syntaxe es6 en même temps. Dans mon package.json sous scripts, j'ai oublié de remplacer "node run" par "babel-node run.js". Ouais, je me sens penaud. :)
joezen777

2
L'écosystème JS est si facile
Rodrigo

51

Jusqu'à ce que les modules soient implémentés, vous pouvez utiliser le "transpiler" de Babel pour exécuter votre code:

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

puis

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

Si vous ne voulez pas taper, --presets node6vous pouvez enregistrer le fichier .babelrc par:

{
  "presets": [
    "node6"
  ]
}

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


16
La dernière recommandation des gens de babel est d'utiliser babel-preset-env qui détecte les polyfills à exécuter, plutôt que babel-preset-node*. En cours d' .babelrcutilisation:{ "presets": [ ["env", { "targets": { "node": "current" } }] ] }
ronen

Après cela, j'ai commencé à recevoir l'erreur (jeton non reconnu '<'): 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. Installer des paquets: babel-core, babel-polyfill,babel-preset-es2015
  2. Créer .babelrcavec du contenu:{ "presets": ["es2015"] }
  3. Ne mettez pas de importdéclaration dans votre fichier d'entrée principal, utilisez un autre fichier par exemple: app.jset votre fichier d'entrée principal devrait être requis babel-core/registeret babel-polyfillpour que Babel fonctionne séparément en premier lieu avant toute autre chose. Ensuite, vous pouvez exiger la déclaration app.jswhere import.

Exemple:

index.js

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

app.js

import co from 'co';

Cela devrait fonctionner avec node index.js.


1
Il s'agit d'une solution de contournement simple qui peut être utilisée pour le développement. Bien que pour la production, vous devez toujours compiler votre code es5.
Jonas Drotleff

attendez ... c'est ce que je pense que c'est? Il y a quelques mois, j'ai rêvé que javascript / perl / n'importe quelle langue pouvait être étendue sans mises à jour par une analyse personnalisée supplémentaire de la langue existante dans la même langue. Est-ce ce qui se passe ici ???
Dmitry

Excellente réponse. Mais dans les scripts, vous pouvez mettre quelque chose comme ci-dessous. Ainsi, vous pouvez utiliser dans n'importe quel fichier. "scripts": {"build": "babel src -d dist", "start": "node dist / index.js"}
gkarthiks

15

babel-preset-es2015 est désormais obsolète et vous recevrez un avertissement si vous essayez d'utiliser la solution de Laurence.

Pour que cela fonctionne avec Babel 6.24.1+, utilisez à la babel-preset-envplace:

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

Ensuite, ajoutez envà vos préréglages dans votre .babelrc:

{
  "presets": ["env"]
}

Consultez la documentation Babel pour plus d'informations.


Existe-t-il un moyen de faire cela avec la CLI?
jcollum


5

Il se peut que vous exécutiez des fichiers non compilés. Commençons propre!

Dans votre répertoire de travail, créez:

  • Deux dossiers. Un pour le code es2015 précompilé. L'autre pour la sortie de Babel. Nous les nommerons respectivement "src" et "lib".
  • Un fichier package.json avec l'objet suivant:

    { 
      "scripts": {
          "transpile-es2015": "babel src -d lib"
      },
      "devDependencies": {
          "babel-cli": "^6.18.0",
          "babel-preset-latest": "^6.16.0"
      }
    }
  • Un fichier nommé ".babelrc" avec les instructions suivantes: {"presets": ["latest"]}

  • Enfin, écrivez le code de test dans votre fichier src / index.js. Dans ton cas: import co from 'co'.

Via votre console:

  • Installez vos packages: npm install
  • Transpilez votre répertoire source dans votre répertoire de sortie avec l'indicateur -d (aka --out-dir) comme, déjà, spécifié dans notre package.json: npm run transpile-es2015
  • Exécutez votre code à partir du répertoire de sortie! node lib/index.js

N'a pas fonctionné malheureusement. Unexpected token import.
dipole_moment

1
Assurez-vous que la babelcommande se trouve dans votre chemin de recherche. Voici une légère 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

La méthode actuelle consiste à utiliser:

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

Et puis dans .babelrc

{
    "presets": ["env"]
}

cette installation du support Babel pour la dernière version de js (es2015 et au-delà) Découvrez babeljs

N'oubliez pas d'ajouter babel-nodeà vos scripts d' package.jsonutilisation lors de l'exécution de votre fichier js comme suit.

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

Maintenant, vous pouvez à l' npm populate yourfile.jsintérieur du terminal.

Si vous exécutez Windows et exécutez une commande d'erreur interne ou externe non reconnue, utilisez le nœud en face du script comme suit

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

ensuite npm run populate


3

Vous devez utiliser babel-preset-env et nodemon pour le rechargement à chaud.

Ensuite, créez un fichier .babelrc avec le contenu ci-dessous:

{
  "presets": ["env"]
}

Enfin, créez un script dans package.json:

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

Ou utilisez simplement ce passe-partout:

Plaque chauffante: node-es6


2
  • installer -> "npm i --save-dev babel-cli babel-preset-es2015 babel-preset-stage-0"

suivant dans le fichier package.json ajouter dans les scripts "start": "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"
}

et créez un fichier pour babel, à la racine ".babelrc"

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

et exécutez npm start dans le terminal


1

Impliquez les étapes suivantes pour résoudre le problème:

1) Installez le préréglage CLI et env

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

2) Créez un fichier .babelrc

{
  "presets": ["env"]
}

3) configurer le démarrage de npm dans package.json

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

4) puis lancez l'application

$ npm start

0

J'ai fait ce qui suit pour surmonter le problème (script ex.js)

problème

$ 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

Solution

# 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

0

@jovi, tout ce que vous avez à faire est d'ajouter un fichier .babelrc comme ceci:

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

et installez ces plugins en tant que devdependences avec npm.

puis réessayez babel-node ***. js. j'espère que cela peut vous aider.


-4

Dans votre application, vous devez déclarer vos require()modules, sans utiliser le mot-clé 'import':

const app = require("example_dependency");

Ensuite, créez un fichier .babelrc:

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

Ensuite, dans votre gulpfile, assurez-vous de déclarer vos require()modules:

var gulp = require("gulp");
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.