Prolfiic
@Prolfiic
Интересуюсь WEB технологиями.

Как настроить babel вместе с gulp?

Всем привет. Нужно настроить babel, чтобы подгружались нужные полифилы через gulp. Интуитивно-понятная документация не дает мне ответ на этот вопрос уже день.
Нужно: поддержка всех новых фич js (ES19), конвертирование их в ES5. поддержка promise, таких методов как Object.values, Array.Flat() и т.д, поддержка legacy кода, т.е. отсутствие "strict mode". Хочется на выходе получить 1 js файл, который уже готов для использования на продакшене.
Что есть сейчас:
return gulp.src(files)
	.pipe(sourcemaps.init())
	.pipe(babel({presets: [["env", { modules: false }]], plugins: ["transform-remove-strict-mode", "transform-runtime"], compact: true}))
	.pipe(concat(config.name + '.min.js'))
	.pipe(uglify())
	.on('error', function (err) { gutil.log(gutil.colors.red('[Error]'), err.toString()); })
	.pipe(sourcemaps.write('./'))
	.pipe(gulp.dest(__dirname + '/Builds'));

Сейчас в коде присутствуют require функции, видимо нужно еще как-то встроить babel-runtime в output, но не понимаю как. Спасибо
  • Вопрос задан
  • 92 просмотра
Пригласить эксперта
Ответы на вопрос 1
l3ftoverz
@l3ftoverz
Люблю Финский металкор
Подключи webpack-stream, GULP не умеет в нормальную сборку JS.
Тебе нужно:

1. Поставить пакеты:
npm i webpack-stream @babel/core @babel/preset-env babel-loader
(Остальные полифиллы, пресеты и плагины для Бабеля поставишь думаю сам)

2. Создать файлwebpack.config.js рядом с gulpfile.js

3. Создать таску:
gulp.task('buildJS', function() {
  const webpack = require('webpack-stream');

  return gulp.src('src/entry.js')
    .pipe(webpack(require('./webpack.config.js')))
    .pipe(gulp.dest('dist/'));
});


Сам webpack.config:

module.exports = {
	output: {
		filename: 'index.js'
	},
	module: {
		rules: [
			{
				test: /\.js$/,
				exclude: /node_modules/,
				use: {
					loader: 'babel-loader',
					options: {
						presets: ['@babel/preset-env']
					}
				}
			}
		]
	},
	devtool: process.env.DEBUG ? 'eval-source-map' : 'none',
	mode: process.env.DEBUG ? 'development' : 'production'
};
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы