Mam ten kod:

"use strict";

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

let proxy = httpProxy.createProxyServer({});

i zainstalowałem babel-corei babel-cliglobalnie przez npm. Chodzi o to, że próbuję skompilować to na moim terminalu:

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

Plik wyjściowy jest kopiowany zamiast kompilacji (mam na myśli to, że jest taki sam jak plik źródłowy).

Czego tu brakuje?

Babel to struktura transformacji. Pre-6.x domyślnie włączał pewne transformacje, ale przy zwiększonym wykorzystaniu wersji Node, które natywnie obsługują wiele funkcji ES6, stało się o wiele ważniejsze, aby rzeczy były konfigurowalne. Domyślnie Babel 6.x nie wykonuje żadnych przekształceń. Musisz mu powiedzieć, jakie transformacje uruchomić:

npm install babel-preset-env

i biegnij

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

lub utwórz .babelrcplik zawierający

{
    "presets": [
        "env"
    ]
}

i uruchom go tak, jak wcześniej.

envw tym przypadku jest to ustawienie wstępne, które zasadniczo mówi, że należy skompilować wszystkie standardowe zachowania ES * do ES5. Jeśli używasz wersji Node, które obsługują niektóre ES6, możesz rozważyć zrobienie tego

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

powiedzieć ustawieniu wstępnemu, aby przetwarzał tylko te rzeczy, które nie są obsługiwane przez twoją wersję Node. Możesz również dołączyć wersje przeglądarki do celów, jeśli potrzebujesz obsługi przeglądarki.

Większość z tych odpowiedzi jest nieaktualna. @babel/preset-envi "@babel/preset-reactczego potrzebujesz (stan na lipiec 2019).

Miałem ten sam problem z inną przyczyną:

Kod, który próbowałem załadować, nie znajdował się w katalogu pakietu, a Babel domyślnie nie transpiluje poza katalog pakietu.

Rozwiązałem to, przenosząc zaimportowany kod, ale być może mógłbym również użyć instrukcji włączenia w konfiguracji Babel.

Najpierw upewnij się, że masz node modules:

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

Następnie dodaj to do pliku konfiguracyjnego pakietu 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
      } 
    } 
  ]
}
...

Bibliografia:

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

Powodzenia!

Od 2020, Jan:

KROK 1: Zainstaluj Babel presets:

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

KROK 2: Utwórz plik: babelrc.jsi dodaj presets:

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

KROK 3: - Zainstaluj babel-loader:

yarn add -D babel-loader

KROK 4: - Dodaj konfigurację programu ładującego do webpack.config.js:

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

Powodzenia...

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

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

... a następnie tworząc .babelrcz presetów:

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

... rozwiązałem bardzo podobny problem dla mnie, z babel 3.8.6i nodev5.10.1

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

Ten sam błąd, inna przyczyna:

Transpiling działał wcześniej, a potem nagle przestał działać, a pliki były po prostu kopiowane bez zmian.

Okazuje się, że .babelrcw pewnym momencie otworzyłem .txtplik i Windows zdecydował się dołączyć do nazwy pliku. Teraz to .babelrc.txtnie zostało rozpoznane przez Babel. Usunięcie .txtsufiksu naprawiło to.

napraw plik .babelrc

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

W roku 2018:

Zainstaluj następujące pakiety, jeśli jeszcze tego nie zrobiłeś:

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

Najlepsze rozwiązanie

Zmarnowałem na to 3 dni

import react from 'react' unexpected identifier

Próbowałem modyfikowania webpack.config.jsi package.jsonplików oraz dodawanie .babelrc, instalowanie i aktualizowanie poprzez pakiety npm, w których byłem wiele, wiele stron, ale nic nie działało.

Co zadziałało? Dwa słowa: npm start. Zgadza się.

uruchom

npm start 

polecenie w terminalu, aby uruchomić lokalny serwer

...

(pamiętaj, że może to nie zadziałać od razu, ale być może dopiero po wykonaniu jakiejś pracy nad npm, ponieważ przed wypróbowaniem tego usunąłem wszystkie zmiany w tych plikach i zadziałało, więc kiedy naprawdę skończysz, potraktuj to jako ostatnie ośrodek )

Znalazłem te informacje na tej zgrabnej stronie . Jest w języku polskim, ale nie krępuj się używać na nim Tłumacza Google.