Webpack Babel yükleme hatası - Yakalanmamış SyntaxError: Beklenmeyen simge ithalatı

Question

Webpack ürününe yeni kayıt oluyorum ve this tutorial numaralı telefonu takip ederek bir sorunla karşılaşıyorum.

webpack.config.js doğru babel-loader kurma değil ama aşağıdaki hatayı bakın konsolu sure.In değilim görünüyor:

bundle.js:49 Uncaught SyntaxError: Unexpected token import 

hattı import sortBy from 'lodash/collection/sortBy'; atıfta benim index.js. Ben

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

: Bu yüzden bir babel transpiling sorunu (? ES6 ait import sözdizimi izin verilmez) İşte

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

Ve webpack.config.js şöyle komple index.js dosyasıdır olduğunu varsayalım here ve here numaralı problemlerle bağlantılı gibi görünen diğer sorularda arama yaptım, ancak etrafta dolaşan bir çözüm veya neden bulamadım hatayı henüz yapma. Belki öğretici güncel değil.Bu sorunu düzeltmek için herhangi bir rehberlik çok takdir olurdu!

GÜNCELLEME

belirli babel yükleme hatası Alexandre Thebaldi aşağıda yayınlanmıştır cevap özetlenen adımları izleyerek çözüldü.

Ancak, yeni bir hata oluştu - Module not found: Error: Cannot resolve module 'lodash/collection/sortBy'

Eğer this tutorial üzerinden çalışan ve bu hatayla karşılaşırsanız varsa, büyük olasılıkla, index.js yanlış bir yol ile lodash/collections dizin görünüyor ki özellikle gerçeği neden olur artık yok. Bu ikinci hatayı sadece lodash/sortBy yolunu değiştirerek çözmeyi başardım.

NOT

ilk lodashnode_modules yüklendiğini kontrol edin ve yol değiştirmeden önce elle doğrudur.

Answer 1

Öncelikle kullanarak size babel çekirdek ve yükleyici yüklediğinizden emin olun:

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

Yani doğru yükleyici babel-loader değil babel olduğunu. yapılandırma olmalıdır:

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

---

Aslında kodunuzu dönüştürmeye Babel anlatmalıyız.

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 

önceden ayarlanmış yüklü sonra bunu etkinleştirmek zorunda.Babel Setup sayfasında

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

detaylar.

Answer 2

Mikeym

Bu babel-yükleyici ve ES6 ile bir konudur.

bu şekilde webpack.config.js değiştirebilir miyim:

Büyük

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