Как настроить компилятор JavaScript, чтобы он поддерживал оператор опциональной цепочки '?.' при использовании сборщика Gulp?

Как исправить ошибку, которая возникает при компиляции кода с использованием опциональной цепочки и минификации через Gulp и gulp-minify? При использовании gulp-minify появляется ошибка "Cannot read properties of undefined (reading 'replace')", которая не даёт подробной информации. Как решить эту проблему и успешно скомпилировать код?
  • 25 марта 2024 г. 1:29
Ответы на вопрос 3
Для настройки компилятора JavaScript для поддержки оператора опциональной цепочки '?.' при использовании сборщика Gulp, вам нужно установить Babel и плагин @babel/plugin-proposal-optional-chaining. 

Шаги:

1. Установите Babel и плагин @babel/plugin-proposal-optional-chaining с помощью npm:
```bash
npm install @babel/core @babel/preset-env @babel/plugin-proposal-optional-chaining --save-dev
```

2. Создайте файл .babelrc в корне вашего проекта и добавьте следующую конфигурацию:
```json
{
  "presets": ["@babel/preset-env"],
  "plugins": ["@babel/plugin-proposal-optional-chaining"]
}
```

3. Добавьте таск в ваш файл Gulp для компиляции JavaScript с помощью Babel:
```javascript
const gulp = require('gulp');
const babel = require('gulp-babel');

gulp.task('js', () => {
  return gulp.src('src/*.js')
    .pipe(babel())
    .pipe(gulp.dest('dist'));
});
```

4. Запустите таск 'js' в вашем Gulp файле для компиляции JavaScript кода с поддержкой опциональной цепочки.

Чтобы исправить ошибку, которая возникает при использовании gulp-minify с опциональной цепочкой, вам нужно изменить настройки компиляции JavaScript. 

Шаги:

1. Установите плагин gulp-uglify-es вместо gulp-minify:
```bash
npm install gulp-uglify-es --save-dev
```

2. Измените таск 'js' в вашем Gulp файле следующим образом:
```javascript
const gulp = require('gulp');
const babel = require('gulp-babel');
const minify = require('gulp-uglify-es').default;

gulp.task('js', () => {
  return gulp.src('src/*.js')
    .pipe(babel())
    .pipe(minify())
    .pipe(gulp.dest('dist'));
});
```

3. Запустите таск 'js' в вашем Gulp файле для компиляции и минификации JavaScript кода.

Это должно помочь избежать ошибки "Cannot read properties of undefined (reading 'replace')", которая возникает при использовании gulp-minify с опциональной цепочкой.
Замени на связку: 

import babel from "gulp-babel";
import uglify from "gulp-uglify";


.pipe(
	babel({
		presets: ["@babel/env"],
	})
)
.pipe(uglify())
В общем, я покопалась и выяснила, что gulp-minify использует terser и чтобы последний компилировал опциональные цепочки, нужно обновить terser на версию не меньше 5.2.0, но при этом ваш код полностью должен соответствовать стандарту ECMAScript 6. Мой видимо не совсем соответствует, потому что посыпались ошибки. Пришлось откатиться.  А потом и правда перейти gulp-uglify, он работает корректно, спасибо комментатору выше за совет)
Похожие вопросы