web-dev-qa-db-fra.com

Erreur d'importation Babel ES6, SyntaxError: import de jeton inattendu

J'essaie de mettre en place un programme modulaire de base, mais il semble que je rencontre des problèmes d'importation de modules. J'essaie d'importer mon module personnalisé, le message d'erreur suivant s'affiche:

(function (exports, require, module, __filename, __dirname) { import testStep from 'testStep';
                                                          ^^^^^^
SyntaxError: Unexpected token import

Le code à l'origine du problème:

testcase.js

import testStep from 'testStep';

testStep.hello();

testStep.js

var testStep = {
  hello: hello,
};

var hello = () => {
  console.log('hello world');
};

export default {testStep};

package.json

{
  "name": "rebuild-poc",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-polyfill": "^6.23.0",
    "babel-preset-env": "^1.6.0"
  },
  "dependencies": {}
}

.babelrc 

{
  "presets": [
    "env"
  ]
}

J'ai déjà essayé plusieurs autres corrections, telles que la définition de testStep en tant que classe, ainsi que l'utilisation de require('./testStep.js'), mais aucune de ces solutions ne semble avoir fonctionné. 

Est-ce que quelque chose est mal configuré avec babel ou dans l'un de mes fichiers?

*** Edit: Je cours testCase.js avec node testCase.js.

javascriptnode.jsbabeljs
5
Graeham B

Installez babel-cli et appelez votre fichier avec: ./node_modules/.bin/babel-node testcase.js

Ça va échouer. Nous devons maintenant corriger votre code.

testStep.js devrait ressembler à:

var hello = () => {
  console.log('hello world');
};

var testStep = {
  hello: hello,
};

export default testStep;

Ensuite, ça va marcher. ;)

Cette première introduction sur https://babeljs.io/ est que vous devez installer babel-cli et babel-preset-env. ;)

Vous pouvez également écrire votre testStep.js comme ceci:

var testStep = {
  hello: hello,
};

function hello () {
  console.log('hello world');
};

export default testStep;

Cela garde le treuil à l'esprit. Comme Jacob dit dans son premier point.

5
danbruegge

Notes de diffusion de babel 6:

Plugin Presets

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

enregistrer le fichier .babelrc

{
  presets: ["env"]
}

Remarque: https://babeljs.io/docs/fr/babel-preset-env#docsNav

2
Jijo Paulose

  1. Vous devez définir hello avec function. Si vous utilisez var, vous n'aurez pas function hoisting. Ainsi, lorsque vous déclarez testStep, hello est non défini. 

  2. Si vous souhaitez utiliser le module es, vous pouvez utiliser babel-register ou babel-node. Dans votre code, node ne peut pas gérer le module es.

Babel-register

Avec bebel-register, tous vos modules seront gérés par babel lors de leur importation.

D'abord, yarn add babel-register babel-cli --dev ou npm install babel-register babel-cli -dev Créez ensuite un fichier d'entrée:

// entry.js
require('babel-register')
require('testcase')

Dans votre test case, vous pouvez utiliser le module es maintenant.

Editez votre package.json: 

"scripts": {
    "test": "node entry.js"
},

vous pouvez exécuter yarn test ou npm run test dans un terminal.

Vous n'avez pas besoin de babel-polyfill, c'est-à-dire pour les navigateurs, pas pour les nœuds.

0
Jacob