Webpack Babel Ladefehler - Uncaught SyntaxError: Unerwarteter Token-Import

Question

Ich bin neu in Webpack und laufe auf ein Problem nach this tutorial.

Es scheint, die webpack.config.js nicht babel-loader korrekt einrichten, aber ich bin sure.In die Konsole nicht ich die folgende Fehlermeldung angezeigt:

bundle.js:49 Uncaught SyntaxError: Unexpected token import 

die die Zeile bezieht sich import sortBy from 'lodash/collection/sortBy'; meines index.js. Also ich nehme an, es ist ein babel transpiling Problem (nicht so dass die import Syntax von ES6?)

Dies ist die komplette index.js Datei

import sortBy from 'lodash/collection/sortBy'; 
import {users} from './users'; 
import {User} from './User'; 

sortBy(users, 'name') 
    .map(user => { 
     return new User(user.name, user.age); 
    }) 
    .forEach(user => { 
     console.log(user.display); 
    }); 

Und webpack.config.js wie folgt aussieht:

module.exports = { 
    entry: './src/index.js', 
    output: { 
     path: './public/',   
     filename: 'bundle.js' 
    }, 
    devServer: { 
     contentBase: './public/' 
    }, 
    module: { 
     loaders: [ 
      {test: /\.js$/, exclude: /node_modules/, loader: 'babel'} 
     ] 
    } 
} 

I‘ habe durch andere Fragen gesucht, die aussah, als ob sie sich auf das Problem beziehen here und here sowie googlen herum, aber haben keine Lösung oder einen Grund gefunden, warum ich gett bin den Fehler noch nicht Vielleicht ist das Tutorial veraltet. Jede Anleitung, wie Sie dieses Problem beheben können, wäre sehr willkommen!

UPDATE

Der Fehler spezifische babel Laden indem Sie die Schritte in Antwort gepostet unten von Alexandre Thebaldi skizziert wurde aufgelöst.

jedoch ein neuer Fehler aufgetreten - Module not found: Error: Cannot resolve module 'lodash/collection/sortBy'

Wenn Sie diesen Fehler durch this tutorial und begegnen arbeiten, wird es höchstwahrscheinlich durch einen falschen Pfad in den index.js verursacht, nämlich die Tatsache, dass das lodash/collections Verzeichnis scheint existiert nicht mehr. Ich konnte diesen zweiten Fehler beheben, indem ich einfach den Pfad zu lodash/sortBy änderte.

HINWEIS

Achten Sie darauf, zuerst zu prüfen, ob lodash in node_modules und der Weg vor dem Wechsel manuell korrekt installiert ist.

Answer 1

Erstens, stellen Sie sicher, dass Sie babel Kern und Lader unter Verwendung installiert haben:

$ npm install --save-dev babel-loader babel-core

So ist der richtige Lader ist babel-loader und nicht babel. Die Konfiguration sollte sein:

module: { 
    loaders: [ 
    { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" } 
    ] 
} 

---

Eigentlich müssen Sie babel sagen, Ihren Code zu transformieren.

Pre-6.x, Babel enabled certain transformations by default. However, Babel 6.x does not ship with any transformations enabled. You need to explicitly tell it what transformations to run. The simplest way to do this is by using a preset, such as the ES2015 Preset. You can install it with.

$ npm install babel-preset-es2015 --save-dev 

Nach Voreinstellung installieren Sie es aktivieren müssen.

Create a .babelrc config in your project root and enable some plugins.

Assuming you have installed the ES2015 Preset, in order to enable it you have to define it in your .babelrc file, like this:

{ 
    "presets": ["es2015"] 
} 

Einzelheiten in Babel Setup Seite.

Answer 2

Mikeym

Dies ist ein Problem mit den babel-loader und ES6.

Können Sie Ihre webpack.config.js Um dies ändern:

module.exports = { 
    entry: './src/index.js', 
    output: { 
     path: './public/',   
     filename: 'bundle.js' 
    }, 
    devServer: { 
     contentBase: './public/' 
    }, 
    module: { 
     loaders: [ 
      {test: /\.js$/, exclude: /node_modules/, loader: 'babel?presets[]=es2015' } 
     ] 
    } 
}