Eu tenho este código:

"use strict";

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

let proxy = httpProxy.createProxyServer({});

e eu tenho instalado babel-coree babel-cliglobalmente através npm. O ponto é quando tento compilar com isso no meu terminal:

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

O arquivo de saída é copiado em vez de compilado (quer dizer, é o mesmo que o arquivo de origem).

O que estou perdendo aqui?

Babel é uma estrutura de transformação. Antes do 6.x, ele habilitava certas transformações por padrão, mas com o aumento do uso de versões do Node que suportam nativamente muitos recursos ES6, tornou-se muito mais importante que as coisas sejam configuráveis. Por padrão, o Babel 6.x não executa nenhuma transformação. Você precisa dizer a ele quais transformações executar:

npm install babel-preset-env

e corra

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

ou crie um .babelrcarquivo contendo

{
    "presets": [
        "env"
    ]
}

e execute-o como antes.

envneste caso, é uma predefinição que basicamente diz para compilar todo o comportamento padrão do ES * para o ES5. Se você estiver usando versões do Node que suportam algum ES6, você pode querer considerar fazer

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

para dizer à predefinição para processar apenas coisas que não são suportadas por sua versão do Node. Você também pode incluir versões de navegador em seus destinos se precisar de suporte de navegador.

Muitas dessas respostas são obsoletas. @babel/preset-enve "@babel/preset-reactsão o que você precisa (a partir de julho de 2019).

Eu tive o mesmo problema com uma causa diferente:

O código que eu estava tentando carregar não estava no diretório do pacote, e o Babel não faz a transpilação por padrão fora do diretório do pacote.

Resolvi movendo o código importado, mas talvez também pudesse ter usado alguma instrução de inclusão na configuração do Babel.

Primeiro, certifique-se de ter o seguinte node modules:

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

Em seguida, adicione ao arquivo de configuração do 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
      } 
    } 
  ]
}
...

Referências:

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

Boa sorte!

A partir de 2020, Jan:

PASSO 1: Instale o Babel presets:

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

ETAPA 2: Crie um arquivo: babelrc.jse adicione presets:

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

PASSO 3: - Instale o babel-loader:

yarn add -D babel-loader

PASSO 4: - Adicione a configuração do carregador em seu webpack.config.js:

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

Boa sorte...

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

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

... e então criar um .babelrccom as predefinições:

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

... resolveu um problema muito semelhante para mim, com babel 3.8.6e nodev5.10.1

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

Mesmo erro, causa diferente:

A transpilação já havia funcionado antes e de repente parou de funcionar, com os arquivos simplesmente sendo copiados como estão.

Acontece que eu abri o .babelrcem algum ponto e o Windows decidiu anexar .txtao nome do arquivo. Agora, isso .babelrc.txtnão foi reconhecido por babel. Remover o .txtsufixo corrigiu isso.

conserte seu .babelrc

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

No ano de 2018:

Instale os seguintes pacotes, se ainda não o fez:

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

Solução final

Eu perdi 3 dias nisso

import react from 'react' unexpected identifier

Eu tentei modificar webpack.config.jse package.jsonarquivos, e adicionando .babelrc, instalar e atualizar pacotes via npm, que eu visitei muitas, muitas páginas, mas nada funcionou.

O que funcionou? Duas palavras: npm start. Está certo.

execute o

npm start 

comando no terminal para lançar um servidor local

...

(lembre-se de que pode não funcionar de imediato, mas talvez só depois de fazer algum trabalho no npm, porque antes de tentar fazer isso eu havia excluído todas as alterações nesses arquivos e funcionou, então, depois de realmente terminar, trate-o como o último resort )

Eu encontrei essa informação nesta página legal . Está em polonês, mas sinta-se à vontade para usar o Google Translate nele.