Ich habe diesen Code:

"use strict";

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

let proxy = httpProxy.createProxyServer({});

und ich habe installiert babel-coreund babel-cliglobal über npm. Der Punkt ist, wenn ich versuche, dies auf meinem Terminal zu kompilieren:

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

Die Ausgabedatei wird kopiert anstatt kompiliert (ich meine, es ist das gleiche wie die Quelldatei).

Was fehlt mir hier?

Babel ist ein Transformationsrahmen. Vor 6.x wurden standardmäßig bestimmte Transformationen aktiviert. Mit der zunehmenden Verwendung von Node-Versionen, die viele ES6-Funktionen nativ unterstützen, ist es jedoch viel wichtiger geworden, dass die Dinge konfigurierbar sind. Standardmäßig führt Babel 6.x keine Transformationen durch. Sie müssen angeben, welche Transformationen ausgeführt werden sollen:

npm install babel-preset-env

und Renn

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

oder erstellen Sie eine .babelrcDatei mit

{
    "presets": [
        "env"
    ]
}

und lass es so laufen, wie du es vorher warst.

envIn diesem Fall handelt es sich um eine Voreinstellung, die grundsätzlich besagt, dass alle Standard-ES * -Verhalten zu ES5 kompiliert werden sollen. Wenn Sie Knotenversionen verwenden, die ES6 unterstützen, sollten Sie dies in Betracht ziehen

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

um die Voreinstellung anzuweisen, nur Dinge zu verarbeiten, die von Ihrer Node-Version nicht unterstützt werden. Sie können auch Browserversionen in Ihre Ziele aufnehmen, wenn Sie Browserunterstützung benötigen.

Die meisten dieser Antworten sind veraltet. @babel/preset-envund "@babel/preset-reactsind was Sie brauchen (ab Juli 2019).

Ich hatte das gleiche Problem mit einer anderen Ursache:

Der Code, den ich laden wollte, befand sich nicht im Paketverzeichnis, und Babel transpiliert standardmäßig nicht außerhalb des Paketverzeichnisses.

Ich habe es gelöst, indem ich den importierten Code verschoben habe, aber vielleicht hätte ich auch eine Inclusion-Anweisung in der Babel-Konfiguration verwenden können.

Stellen Sie zunächst sicher, dass Sie Folgendes haben node modules:

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

Fügen Sie dies als Nächstes Ihrer Webpack- Konfigurationsdatei ( webpack.config.js) hinzu:

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

Verweise:

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

Viel Glück!

Ab 2020, Jan :

SCHRITT 1: Installieren Sie Babel presets:

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

SCHRITT 2: Erstellen Sie eine Datei: babelrc.jsund fügen Sie Folgendes hinzu presets:

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

SCHRITT 3: - Installieren Sie babel-loader:

yarn add -D babel-loader

SCHRITT 4: - Fügen Sie die Loader-Konfiguration hinzu in webpack.config.js:

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

Viel Glück...

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

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

... und dann ein .babelrcmit den Presets erstellen :

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

... hat ein sehr ähnliches Problem für mich behoben, mit babel 3.8.6und nodev5.10.1

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

Gleicher Fehler, andere Ursache:

Das Transpilieren hatte zuvor funktioniert und dann plötzlich aufgehört zu arbeiten, wobei Dateien einfach so kopiert wurden, wie sie sind.

Es stellte sich heraus, dass ich das .babelrcirgendwann geöffnet habe und Windows beschlossen hat, .txtan den Dateinamen anzuhängen . Nun, das .babelrc.txtwurde von Babel nicht erkannt. Durch Entfernen des .txtSuffixes wurde das behoben.

Repariere deine .babelrc

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

Im Jahr 2018:

Installieren Sie folgende Pakete, falls Sie dies noch nicht getan haben:

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

Ultimative Lösung

Ich habe 3 Tage damit verschwendet

import react from 'react' unexpected identifier

Ich habe versucht , Pakete zu ändern webpack.config.jsund package.jsonDateien hinzuzufügen .babelrc, zu installieren und zu aktualisieren npm. Ich habe viele, viele Seiten besucht, aber nichts hat funktioniert.

Was hat funktioniert? Zwei Wörter: npm start. Das stimmt.

Führen Sie die

npm start 

Befehl im Terminal , um einen lokalen Server zu starten

...

(Beachten Sie, dass es möglicherweise nicht sofort funktioniert, aber vielleicht erst, nachdem Sie an npm gearbeitet haben, da ich vor dem Ausprobieren alle Änderungen in diesen Dateien gelöscht hatte und es funktioniert hat. Wenn Sie also wirklich fertig sind, behandeln Sie es als Ihr letztes Resort )

Ich habe diese Informationen auf dieser ordentlichen Seite gefunden . Es ist auf Polnisch, aber Sie können gerne Google Translate verwenden.