J'ai ce code:

"use strict";

import browserSync from "browser-sync";
import httpProxy from "http-proxy";

let proxy = httpProxy.createProxyServer({});

et j'ai installé babel-coreet babel-cliglobalement via npm. Le point est quand j'essaye de compiler avec ceci sur mon terminal:

babel proxy.js --out-file proxified.js

Le fichier de sortie est copié au lieu d'être compilé (je veux dire, c'est le même que le fichier source).

Qu'est-ce que j'oublie ici?

Babel est un cadre de transformation. Avant la 6.x, il permettait certaines transformations par défaut, mais avec l'utilisation accrue des versions de Node qui prennent en charge nativement de nombreuses fonctionnalités ES6, il est devenu beaucoup plus important que les choses soient configurables. Par défaut, Babel 6.x n'effectue aucune transformation. Vous devez lui indiquer les transformations à exécuter:

npm install babel-preset-env

et courir

babel --presets env proxy.js --out-file proxified.js

ou créez un .babelrcfichier contenant

{
    "presets": [
        "env"
    ]
}

et exécutez-le comme vous l'étiez avant.

envdans ce cas, il y a un préréglage qui dit essentiellement de compiler tous les comportements ES * standard vers ES5. Si vous utilisez des versions Node prenant en charge certains ES6, vous pouvez envisager de

{
    "presets": [
        ["env", { "targets": { "node": "true" } }],
    ]
}

pour indiquer au préréglage de ne traiter que les éléments qui ne sont pas pris en charge par votre version de Node. Vous pouvez également inclure des versions de navigateur dans vos cibles si vous avez besoin de la prise en charge du navigateur.

La plupart de ces réponses sont obsolètes. @babel/preset-envet "@babel/preset-reactsont ce dont vous avez besoin (à partir de juillet 2019).

J'ai eu le même problème avec une cause différente:

Le code que j'essayais de charger ne se trouvait pas dans le répertoire du package et Babel ne transpilait pas par défaut en dehors du répertoire du package.

Je l'ai résolu en déplaçant le code importé, mais j'aurais peut-être aussi pu utiliser une instruction d'inclusion dans la configuration de Babel.

Assurez-vous d'abord que vous disposez des éléments suivants node modules:

npm i -D webpack babel-core babel-preset-es2015 babel-preset-stage-2 babel-loader

Ensuite, ajoutez ceci à votre fichier de configuration Webpack ( webpack.config.js):

// webpack.config.js
...
module  :  {
  loaders  :  [
    {
      test    :  /\.js$/,
      loader  :  'babel',
      exclude :  /node_modules/,
      options :  {
        presets  :  [ 'es2015', 'stage-2' ] // stage-2 if required
      } 
    } 
  ]
}
...

Références:

• https://gist.github.com/Couto/6c6164c24ae031bff935
• https://github.com/babel/babel-loader/issues/214

Bonne chance!

À partir de 2020, Jan:

ÉTAPE 1: Installez Babel presets:

yarn add -D @babel/preset-env @babel/preset-react

ÉTAPE 2: Créez un fichier: babelrc.jset ajoutez le presets:

module.exports = {
  // ...
  presets: ["@babel/preset-env", "@babel/preset-react"],
  // ...
}

ÉTAPE 3: - Installez le babel-loader:

yarn add -D babel-loader

ÉTAPE 4: - Ajoutez la configuration du chargeur dans votre webpack.config.js:

{
//...
  module: [
    rules: [
      test: /\.(js|mjs|jsx|ts|tsx)$/,
      loader: require.resolve('babel-loader')
    ]
  ]
//...
}

Bonne chance...

npm install --save-dev babel-preset-node5

npm install --save-dev babel-preset-react

... puis en créant un .babelrcavec les préréglages:

{
  "presets": [
    "node5",
    "react"
  ]
}

... a résolu un problème très similaire pour moi, avec babel 3.8.6et nodev5.10.1

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

Même erreur, cause différente:

Transpiling avait déjà fonctionné avant, puis a soudainement cessé de fonctionner, les fichiers étant simplement copiés tels quels.

Il s'avère que j'ai ouvert le .babelrcà un moment donné et Windows a décidé d'ajouter .txtau nom de fichier. Cela .babelrc.txtn'a pas été reconnu par Babel. La suppression du .txtsuffixe a corrigé cela.

corrigez votre .babelrc

{
  "presets": [
    "react",
    "ES2015"
  ]
}

En 2018:

Installez les packages suivants si vous ne l'avez pas encore fait:

npm install babel-loader babel-preset-react

webpack.config.js

{
    test: /\.jsx?$/,
    exclude: /node_modules/,
    use: [
      {
        loader: 'babel-loader',
        options: {
          presets: ['es2015','react']  // <--- !`react` must be part of presets!
        }
      }
    ],
  }

Solution ultime

J'ai perdu 3 jours avec ça

import react from 'react' unexpected identifier

J'ai essayé de modifier webpack.config.jset de package.jsonfichiers, et d'ajouter .babelrc, d'installer et de mettre à jour des packages via npm, j'ai visité de très nombreuses pages mais rien n'a fonctionné.

Qu'est-ce qui a fonctionné? Deux mots: npm start. C'est vrai.

exécuter le

npm start 

commande dans le terminal pour lancer un serveur local

...

(sachez que cela ne fonctionnera peut-être pas tout de suite, mais peut-être seulement après avoir travaillé sur npm, car avant d'essayer cela, j'avais supprimé toutes les modifications de ces fichiers et cela a fonctionné, donc une fois que vous avez vraiment terminé, traitez-le comme votre dernier station )

J'ai trouvé cette information sur cette jolie page . Il est en polonais, mais n'hésitez pas à utiliser Google translate dessus.