Webpack ES6 Module Bundling w/Typcript и Babel

Question

У меня есть простая настройка, где я использую webpack-stream для использования веб-пакета в глотках. Я пытаюсь перенести свой машинописный текст в javascript и объединить все мои модули в один файл с помощью модулей es6.

Моя установка (У меня есть файл .babelrc установлен в es2015):

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

В результате этой установки просто transpiles мой машинописный для index.ts и сохраняет импорт в файле. Что я делаю неправильно с моей конфигурацией?

Answer 1

Решено. Конфигурация для погрузчиков должна выглядеть так:

loaders: [ 
    { 
    loader: 'babel!ts', 
    test: /\.ts$/, 
    exclude: /node_modules/ 
    } 
] 

Это гарантирует, что babel запускается до машинописного текста.

Answer 2

Во-первых, убедитесь, что у вас есть все зависимости НПМ:

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

Я считаю, что вам также необходимо указать, какие предварительно использовать, поэтому обновить Бабель погрузчик из этого:

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

к этому:

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