Babel ES6 d'erreur d'importation, SyntaxError: Unexpected token d'importation

Je suis en train de mettre en place une base modulaire du programme, cependant j'ai l'impression de courir dans des problèmes avec l'importation de modules. Je tente d'importer mon module personnalisé, j'obtiens l'erreur suivante:

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

Le code qui est à 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};

paquet.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 le réglage de testStep en tant que classe, ainsi que l'utilisation de require('./testStep.js'), cependant, aucune de ces semblent avoir bien fonctionné.

Dois-je quelque chose de mal configuré avec babel ou dans l'un de mes fichiers?

***Edit: je suis en cours d'exécution testCase.js avec node testCase.js.

  • regarde comme il est un support supplémentaire ou la virgule supplémentaire dans testStep
  • import ne peut pas être à l'intérieur d'une fonction
  • dans l'es6 virgule sont autorisés, mais j'ai essayé de supprimé et il ne corrige pas le problème.
  • pourriez-vous préciser sur ce point un peu plus? au meilleur de ma connaissance, l'importation n'est pas à l'intérieur d'une fonction. C'est dans le script, mais je suis peut-être un malentendu
  • c'est à l'intérieur de IIFE (selon le message d'erreur) .... Import declarations are only allowed at the top level of module scope ... J'ai peut-être l'incompréhension de la sortie d'erreur que vous obtenez bien que maintenant que j'ai regardé de plus près le code en question
  • avez-vous vérifié this regardez comme vous devez définir les paramètres prédéfinis pour es2015

InformationsquelleAutor Graeham Broda | 2017-07-25
  1. 5

    S'il vous plaît installer babel-cli et appelez votre fichier avec: ./node_modules/.bin/babel-node testcase.js

    Ce sera un échec. Maintenant, nous devons corriger votre code.

    testStep.js devrait ressembler à:

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

var testStep = {
  hello: hello,
};

export default testStep;

    Puis, il va travailler. 😉

    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 permet de maintenir le levage à l'esprit. Comme Jacob a dit dans son premier point.

    • cela a réglé mon problème! merci!
    InformationsquelleAutor danbruegge
  2. 2

    De la babel 6 notes de Version:

    Plugin Presets

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

    l'enregistrer .babelrc fichier

    {
  presets: ["env"]
}

    Note:
    https://babeljs.io/docs/en/babel-preset-env#docsNav

    • Babel recommande d'utiliser un autre paquet babel-preset-env
    InformationsquelleAutor Jijo Paulose
  3. 0

    1. Vous devez définir hello avec function, à l'aide de var, vous n'aurez pas function hoisting, de sorte que lors de la déclaration de testStep, hello est pas défini.

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

    Babel-registre

    Avec bebel-inscrivez-vous, toute votre module sera gérée par babel, lorsqu'ils sont importés.

    D'abord,yarn add babel-register babel-cli --dev ou npm install babel-register
    babel-cli -dev
    Ensuite, créez une entrée de fichier:

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

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

    Modifier votre colis vous.json: 

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

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

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

    • Bon point pour l'adresse de levage. 😉
    InformationsquelleAutor Jacob