Webpack ES6 Modul Bündelung w/Typescript und Babel

Question

Ich habe eine einfache Einrichtung, wo ich Webpack-Stream verwenden, um Web Pack in Schluck zu verwenden. Ich versuche, mein Typoskript in Javascript zu übertragen und alle meine Module in einer Datei mit ES6-Modulen zu bündeln.

Mein Setup (Ich habe eine .babelrc Datei auf es2015 eingestellt):

return gulp.src('./app/index.ts') 
    .pipe(webpack({ 
     resolve: { 
     extensions: ['', '.ts', '.js'] 
     }, 
     module: { 
     loaders: [ 
      { test: /\.ts$/, exclude: /node_modules/, loader: 'ts-loader' }, 
      { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' } 
     ] 
     }, 
     output: { 
     filename: 'bundle.js' 
     } 
    })) 
    .pipe(gulp.dest('./build)); 

Das Ergebnis dieser Einrichtung transpiles nur meine Typoskript für index.ts und hält die Importe in der Datei. Was mache ich falsch mit meiner Konfiguration?

Answer 1

Gelöst es. Die Konfiguration für Lader sollte wie folgt aussehen:

Damit wird sichergestellt, dass Babel vor Typoskript ausgeführt wird.

Answer 2

Erstens, stellen Sie sicher, dass Sie alle Ihre npm Abhängigkeiten:

"babel": "^6.5.2", "babel-preset-es2015": "^6.9.0", "babel-loader": "^6.2.5"

Ich glaube, Sie müssen auch angeben, welche verwenden voreingestellt, so aktualisieren Sie Ihre babel Lader aus dieser:

{ test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' }

dazu:

{ loader: 'babel', test: /\.js$/, exclude: /node_modules/, query: { presets: ['es2015'] } }