Чтобы использовать код ES6 в вашем приложении, нам нужно преобразовать код ES6 в код ES5 с помощью babel, чтобы его можно было понять как в других, так и в старых браузерах.

Шаг 1. Установите необходимые пакеты

npm install @babel/core @babel/preset-env gulp-babel --save-dev

Если вы столкнулись с такой ошибкой:

ReferenceError: primordials is not defined in node...

Тогда будет полезно обновить gulp до версии 4. Я использовал node@12 и gulp@3. Чтобы обновить gulp, выполните следующую команду:

npm install gulp@4 --save-dev

Примечание. async и series() предназначены для gulp 4.

Шаг 2. Теперь сообщите нашему проекту, что нужно использовать babel (вы можете выбрать вариант A или B)

A) Добавьте этот код в файл package.json после зависимостей и devDependencies.

{
  “presets”: [“@babel/preset-env”]
}

B)Создайте файл .babelrc в корневом каталоге и добавьте приведенный ниже код.

{
  “presets”: [“@babel/preset-env”]
}

Шаг 3. Добавьте зависимость для babel в файл: gulpfile.js

Возможно, вам придется переименовать файл gulpfile.js в gulpfile.babel.js..

Добавьте следующий код в gulpfile.js, чтобы включить зависимость gulp и babel:

var gulp = require('gulp'), 
           require('gulp-babel')

Шаг 4. Определяем, какие файлы нужно транспилировать:

var requiredFiles = ['modules/**/*.js',      // include these files 
                    '!js/vendors/**/*.js',    // exclude these files

Шаг 5. Передайте его как источник для gulp:

gulp.task('babelTest', async function () {
     return gulp.src(requiredFiles)
            .pipe(babel({presets: ['@babel/preset-env'] })) 
            .pipe(gulp.dest('dist/js'));
});

Шаг 6. Чтобы запустить задачу gulp во время сборки gulp:

gulp.task('build', gulp.series('babelTest', ....));

И запустите сборку с помощью приведенной ниже команды. Теперь она должна выполнять трансляцию вместе с другими задачами, которые вы хотите запустить во время сборки.

npm run build

(Необязательно)Шаг 7. Чтобы запустить задачу babelTest из npm:

В файле package.json добавьте приведенный ниже код внутри скриптов:

"scripts":{
           
          "babelTest": "gulp babelTest", 
 }

И чтобы просто запустить транспиляцию Babel, введите код ниже в терминале:

npm run babelTest

Помните:

Преобразование ES6 -> ES5 должно производиться до удаления кода, потому что преобразование не может понять синтаксис ES6.

Ex:

var gulp = require('gulp'),
    uglifyJS = require('gulp-uglify'),
    babel = require('gulp-babel');
....
gulp.task('uglifyJS', async function () {
 gulp.src(requiredFiles)
     .pipe(babel({presets: ['@babel/preset-env'] }))
     .pipe(uglifyJS())
     .pipe(gulp.dest('dist/js'));
});
.....

Если вам понравилась моя история или она вам помогла. Вы можете купить мне кофе: