Ho questo codice:

"use strict";

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

let proxy = httpProxy.createProxyServer({});

e ho installato babel-coree babel-cliglobalmente tramite npm. Il punto è quando provo a compilare con questo sul mio terminale:

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

Il file di output viene copiato anziché compilato (voglio dire, è lo stesso del file sorgente).

Cosa mi manca qui?

Babel è un quadro di trasformazione. Prima della 6.x, abilitava alcune trasformazioni per impostazione predefinita, ma con l'aumento dell'utilizzo delle versioni di Node che supportano nativamente molte funzionalità ES6, è diventato molto più importante che le cose siano configurabili. Per impostazione predefinita, Babel 6.x non esegue alcuna trasformazione. Devi dirgli quali trasformazioni eseguire:

npm install babel-preset-env

e corri

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

o creare un .babelrcfile contenente

{
    "presets": [
        "env"
    ]
}

ed eseguilo proprio come eri prima.

envin questo caso è un preset che fondamentalmente dice di compilare tutto il comportamento ES * standard su ES5. Se stai usando versioni di Node che supportano alcuni ES6, potresti prendere in considerazione l'idea di farlo

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

per dire al preset di elaborare solo cose che non sono supportate dalla tua versione di Node. Puoi anche includere le versioni del browser nelle destinazioni se hai bisogno del supporto del browser.

La maggior parte di queste risposte sono obsolete. @babel/preset-enve "@babel/preset-reactsono ciò di cui hai bisogno (a partire da luglio 2019).

Ho avuto lo stesso problema con una causa diversa:

Il codice che stavo cercando di caricare non si trovava nella directory del pacchetto e Babel non esegue il transpiling al di fuori della directory del pacchetto.

L'ho risolto spostando il codice importato, ma forse avrei potuto usare anche qualche dichiarazione di inclusione nella configurazione di Babel.

Innanzitutto assicurati di avere quanto segue node modules:

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

Successivamente, aggiungilo al tuo file di configurazione 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
      } 
    } 
  ]
}
...

Riferimenti:

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

In bocca al lupo!

A partire da 2020, Jan:

PASSAGGIO 1: Installa Babel presets:

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

PASSAGGIO 2: creare un file: babelrc.jse aggiungere presets:

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

FASE 3: - Installa babel-loader:

yarn add -D babel-loader

FASE 4: - Aggiungi la configurazione del caricatore nel tuo webpack.config.js:

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

In bocca al lupo...

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

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

... e poi crearne uno .babelrccon i preset:

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

... ha risolto un problema molto simile per me, con babel 3.8.6e nodev5.10.1

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

Stesso errore, causa diversa:

Il transpiling aveva funzionato prima e poi improvvisamente ha smesso di funzionare, con i file che venivano semplicemente copiati così come sono.

.babelrcA un certo punto ho aperto il e Windows ha deciso di aggiungerlo .txtal nome del file. Questo .babelrc.txtnon è stato riconosciuto da Babel. La rimozione del .txtsuffisso ha risolto il problema.

correggi il tuo .babelrc

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

Nell'anno 2018:

Installa i seguenti pacchetti se non l'hai ancora fatto:

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

Soluzione definitiva

Ho sprecato 3 giorni su questo

import react from 'react' unexpected identifier

Ho provato a modificare webpack.config.jse package.jsonfile e ad aggiungere .babelrc, installare e aggiornare pacchetti tramite npm, ho visitato molte, molte pagine ma niente ha funzionato.

Cosa ha funzionato? Due parole: inizio npm. Giusto.

corri il

npm start 

comando nel terminale per avviare un server locale

...

( tieni presente che potrebbe non funzionare subito ma forse solo dopo aver lavorato su npm perché prima di provarlo avevo cancellato tutte le modifiche in quei file e ha funzionato, quindi dopo aver finito davvero, trattalo come l'ultimo località )

Ho trovato queste informazioni in questa bella pagina . È in polacco ma sentiti libero di usare Google Translate.