Błąd ładowania ładowania pakietu Web Toolbar - Uncaught SyntaxError: Nieoczekiwany import tokena

Question

Jestem nowy w pakiecie Webpack i napotykam problem następujący po this tutorial.

Wydaje się webpack.config.js nie jest utworzenie babel-loader poprawnie, ale nie jestem sure.In konsoli widzę następujący błąd:

bundle.js:49 Uncaught SyntaxError: Unexpected token import 

który odnosi się do mojego wiersza import sortBy from 'lodash/collection/sortBy';index.js. Zakładam więc, że jest to problem babel transpiling (nie dopuszczając składnię ES6 import?)

Oto pełna index.js plik

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); 
    }); 

I webpack.config.js wygląda następująco:

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 przeszukałem inne pytania, które wyglądały tak, jakby odnosiły się do problemu here i here, jak również googlowałem, ale nie znalazłem rozwiązania lub powodu, dla którego jestem gett jeszcze błąd. Może samouczek jest nieaktualny. Wszelkie wskazówki, jak rozwiązać ten problem, byłyby mile widziane!

UPDATE

Specyficzny loading error Babel został rozwiązany, wykonując kroki opisane w odpowiedzi zamieszczone poniżej Alexandre Thebaldi.

Jednak wystąpił nowy błąd - Module not found: Error: Cannot resolve module 'lodash/collection/sortBy'

Jeśli pracujesz przez this tutorial i wystąpienia tego błędu jest najprawdopodobniej spowodowane nieprawidłowym ścieżki w index.js, w szczególności fakt, że katalog lodash/collections wydaje już nie istnieje. Udało mi się rozwiązać ten drugi błąd, po prostu zmieniając ścieżkę na lodash/sortBy.

UWAGA

Pamiętaj, aby najpierw sprawdzić, lodash jest zainstalowany w node_modules i ścieżka jest prawidłowa ręcznie przed zmianą.

Answer 1

Po pierwsze, upewnij się, że masz zainstalowany rdzeń Babel i ładowarka za pomocą:

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

więc prawidłowa ładowarka jest babel-loader i nie babel. Config powinno być:

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

---

Właściwie trzeba powiedzieć Babel przekształcić swój kod.

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 

Po zainstalowaniu zadana trzeba ją włączyć.

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"] 
} 

Szczegóły w Babel Setup stronie.

Answer 2

Mikeym

Jest problem z babel-loader i ES6.

można zmienić webpack.config.js do tego:

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' } 
     ] 
    } 
}