Webpack με TypeScript - Όταν στοχεύουμε σε ES6 η λέξη-κλειδί import δεν ορίζεται


Δουλεύω σε ένα νέο έργο Angular2 με το Webpack ως φορτωτή μοντέλων και το Typescript ως γλώσσα προγραμματισμού.

Όταν στοχεύω τον μεταγλωττιστή Typescript να στοχεύει σε ES5, όλα λειτουργούν καλά. Αλλά όταν στοχεύω σε ES6 και πρόσθεσα το babel-loader ως μετατροπέα σε ES5, λαμβάνω το σφάλμα: Unexpected token import

Λειτουργική ρύθμιση ES5:

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

Μη Λειτουργική Διαμόρφωση ES6:

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

Δεν μπορώ να καταλάβω γιατί η λέξη-κλειδί import του ES6 δεν ορίζεται;;;
Παρατηρώ επίσης ότι αν αλλάξω την εντολή import σε εντολή require(), τότε δεν παίρνω το σφάλμα, αλλά θέλω να χρησιμοποιήσω τη σύνταξη import του ES6.

Απάντηση #1

Τελικά βρήκα την απάντηση. Όταν χρησιμοποιείτε babel-loader, θα χρειαστεί να εγκαταστήσετε όχι μόνο το babel-loader και το babel-core, αλλά και το module babel-preset-es2015.

1. Εκτέλεση εντολών shell/τερματικού:
$ npm i babel-loader -D
$ npm i babel-core -D
$ npm i babel-preset-es2015 -D

(npm i είναι συντομογραφία για npm install. -D είναι συντομογραφία για --save-dev που θα προσθέσει τα πακέτα στο στοιχείο devDependencies στο αρχείο package.json)

2. Επεξεργαστείτε το αρχείο webpack.config:

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

Για περισσότερες πληροφορίες σχετικά με το πώς να ρυθμίσετε το ts-loader με το babel-loader, δείτε: https://gist.github.com/nojaf/daf886031072b572bc9a