Webpack ja TypeScript - Kun kohteena on ES6, import-avainsanaa ei määritelty

Työskentelen uuden Angular2-projektin parissa, jossa Webpack toimii mallin lataajana ja Typescript kehityskielenä.

Kun kohdistan Typescript-kääntäjän ES5:een, kaikki toimii hyvin. Mutta kun kohdistan ES6:een ja lisään babel-loader-kääntäjänä ES5:een, saan virheen: Unexpected token import

Toimiva ES5-konfiguraatio:

// 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')'

Ei toimi ES6-konfiguraatio:

// 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

En voi ymmärtää, miksi ES6 import -avainsanaa ei ole määritelty???
Huomasin myös, että jos muutan import-lauseen require()-lauseeksi, saan virheen, mutta haluan käyttää ES6 import -syntaksia.

Vastaus #1

Viimein löysin vastauksen. Kun käytät babel-loader-laajennusta, sinun ei tarvitse vain asentaa babel-loader ja babel-core, vaan myös babel-preset-es2015-moduuli.

1. Suorita shell-/terminaalikomennot:
$ npm i babel-loader -D
$ npm i babel-core -D
$ npm i babel-preset-es2015 -D

(npm i on lyhenne komennosta npm install. -D on lyhenne komennosta --save-dev, joka lisää paketit devDependencies-solmuun package.json-tiedostossa)

2. Muokkaa webpack.config-tiedostoa:

// 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']
                }
            },
            // ...
        ]
    }

Lisätietoja siitä, miten ts-loader voidaan konfiguroida yhdessä babel-loader kanssa, löytyy osoitteesta: https://gist.github.com/nojaf/daf886031072b572bc9a