Webpack ile TypeScript - ES6 hedeflendiğinde import anahtar kelimesi tanımlı değil

Webpack'i model yükleyici olarak ve Typescript'i geliştirme dili olarak kullanan yeni bir Angular2 projesi üzerinde çalışıyorum.

Typescript derleyicisini ES5'e hedeflediğimde her şey düzgün çalışıyor. Ancak ES6'yı hedeflediğimde ve ES5'e derleyici olarak babel-loader eklediğimde şu hatayı alıyorum: Unexpected token import

Çalışan ES5 yapılandırması:

// tsconfig.json
"compilerOptions":
{
    "target": "es5",
    // ..
}

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

// app.ts
import 'core-js' // this line is transpiled by ts-comiler/loader to 'require('core-js')'

Çalışmayan ES6 yapılandırması:

// tsconfig.json
"compilerOptions":
{
    "target": "es6",
    // ..
}

// webpack.config.js   
module:
    {
        loaders:
        [
            { test: /\.tsx?$/, exclude: /node_modules/, loader: "babel-loader!ts-loader" },
            { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" },
            // ...
        ]
    }

// app.ts
import 'core-js' // this line throw the error: Uncaught SyntaxError: Unexpected token import

ES6 import anahtar kelimesinin neden tanımlanmadığını anlayamıyorum???
Ayrıca, import ifadesini require() ifadesiyle değiştirirsem hatayı almadığımı fark ettim, ama ES6 import sözdizimini kullanmak istiyorum.

Cevap #1

Nihayet cevabı buldum. babel-loader kullanırken sadece babel-loader ve babel-core yüklemeniz değil, aynı zamanda babel-preset-es2015 modülünü de yüklemeniz gerekecek.

1. Shell/terminal komutlarını çalıştırın:
$ npm i babel-loader -D
$ npm i babel-core -D
$ npm i babel-preset-es2015 -D

(npm i, npm install için bir takma addır. -D, --save-dev için bir takma addır ve paketleri package.json dosyasındaki devDependencies düğümüne ekler)

2. webpack.config dosyasını düzenleyin:

// webpack.config.js   
module:
    {
        loaders:
        [
            { 
                test: /\.tsx?$/, 
                exclude: /node_modules/, 
                loader: "babel-loader?presets[]=es2015!ts-loader" 
            },
            { 
                test: /\.js$/, 
                exclude: /node_modules/, 
                loader: "babel-loader",
                query:
                {
                    presets: ['es2015']
                }
            },
            // ...
        ]
    }

Daha fazla bilgi için, ts-loader'ı babel-loader ile nasıl yapılandıracağınıza bakın: https://gist.github.com/nojaf/daf886031072b572bc9a