web-dev-qa-db-fra.com

Le fichier Babel est copié sans être transformé

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-core et babel-cli globalement via npm. Le fait est que lorsque 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?

javascriptbabeljs
103
Raul Vallespin

Babel est un cadre de transformation. Avant la version 6.x, elle permettait certaines transformations par défaut, mais avec l'utilisation accrue des versions de Node qui prennent en charge de manière native de nombreuses fonctionnalités de l'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 fichier .babelrc contenant

{
    "presets": [
        "env"
    ]
}

et lancez-le comme vous étiez avant.

env est dans ce cas un paramètre prédéfini qui indique en principe que tous les comportements ES * standard doivent être compilés pour ES5. Si vous utilisez des versions de nœud prenant en charge certains ES6, vous pouvez envisager de le faire.

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

indiquer au préréglage de ne traiter que les éléments non pris en charge par votre version de nœud. Vous pouvez également inclure des versions de navigateur dans vos cibles si vous avez besoin de la prise en charge de votre navigateur.

162
loganfsmyth

Tout d’abord, assurez-vous que vous avez le node modules suivant:

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

Ajoutez ensuite ceci à votre fichier Webpack config (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:

Bonne chance!

3
Akash

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

Le code que je tentais de charger ne se trouvait pas dans le répertoire du paquet et Babel ne transfère pas par défaut en dehors du répertoire du paquet.

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

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

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

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

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

... a résolu un problème très similaire pour moi, avec babel 3.8.6 et le nœud v5.10.1

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

2
Micah Stubbs

Même erreur, cause différente:

Transpiling avait déjà fonctionné et 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 .txt au nom du fichier. Maintenant que .babelrc.txt n'a pas été reconnu par babel. Supprimer le suffixe .txt a résolu le problème.

0
robro

réparer votre .babelrc

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

En 2018:

Installez les paquets suivants si vous ne les avez pas encore:

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!
        }
      }
    ],
  }
0
Legends

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

0
mmla

Solution ultime

J'ai perdu 3 jours sur ce 

import react from 'react' unexpected identifier

J'ai essayé de modifier les fichiers webpack.config.js et package.json, et d'ajouter .babelrc, d'installer et de mettre à jour des paquets 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.

lance le 

npm start

commande dans le terminal pour lancer un serveur local

...

(Remarquez que cela ne fonctionnera peut-être pas tout de suite, mais peut-être qu'après avoir effectué quelques travaux sur npm, car avant de l'essayer, j'avais supprimé toutes les modifications apportées à ces fichiers et cela fonctionnait donc après vraiment fait, traitez-le comme votre dernier recours) 

J'ai trouvé cette information sur cette page soignée . C'est en polonais, mais n'hésitez pas à utiliser Google translate.

0
Aduku