Объединение модуля Webpack ES6 с Typescript и Babel

У меня есть простая настройка, в которой я использую webpack-stream для использования веб-пакета в gulp. Я пытаюсь преобразовать свой машинописный текст в 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));

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


webpack typescript babeljs es6-modules gulp
person Bob    schedule 31.10.2016    source источник

Ответы (2)


arrow_upward
0
arrow_downward

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

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

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

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

к этому:

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

person ermish    schedule 31.10.2016
comment
У меня есть файл .babelrc с моим предустановленным значением es2015, и я попытался поместить его в свою конфигурацию веб-пакета и получил тот же результат. Вместо установки babel я установил babel-core, я думаю, что это новый способ установки babel. Независимо от того, что мой вывод представляет собой файл, включающий только мой код index.ts с операторами импорта. - person Bob; 31.10.2016
comment
о, извините, я пропустил это. Попробуйте поместить загрузчик babel в отдельный раздел post-loaders. Посмотрите здесь. - person ermish; 31.10.2016
comment
Помещение загрузчика babel в postLoaders дает тот же результат. - person Bob; 31.10.2016

arrow_upward
0
arrow_downward

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

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

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

person Bob    schedule 31.10.2016