Как научить компилятор js обрабатывать конструкцию опциональной цепочки ‘?.’ в gulp?

Для того чтобы научить компилятор JS обрабатывать конструкцию опциональной цепочки '?.' в Gulp, необходимо воспользоваться транспилятором, который преобразует современный код JavaScript (ES6+) в более старую версию JavaScript (например, ES5), поддерживаемую в браузерах и окружениях, где применяется Gulp.

Один из наиболее популярных транспиляторов для JavaScript - Babel. Чтобы настроить Gulp для обработки опциональной цепочки '?.' с использованием Babel, следуйте этим шагам:

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

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

2. Создайте файл конфигурации Babel с названием '.babelrc' в корневом каталоге вашего проекта и добавьте туда пресет '@babel/preset-env':

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

3. Настройте задачу Gulp для компиляции JavaScript с помощью Babel:

const gulp = require('gulp');
const babel = require('gulp-babel');

gulp.task('scripts', function() {
  return gulp.src('src/*.js')
    .pipe(babel({
      presets: ['@babel/env']
    }))
    .pipe(gulp.dest('dist'));
});

4. Далее в вашем JavaScript коде вы можете использовать опциональную цепочку '?.' без опасений:

// Пример кода с использованием опциональной цепочки '?.' (ES6+)
const user = {
  name: 'Alice',
  address: {
    street: 'Wonderland St.'
  }
};

const street = user.address?.street;
console.log(street); // Выведет: 'Wonderland St.'

Теперь, запустив задачу Gulp scripts, ваш JavaScript код будет транспилирован Babel'ом, а опциональная цепочка '?.' будет корректно обработана, даже если ваш целевой браузер или окружение не поддерживает эту возможность.