@michaelromanov90

Как подключить плагины babel для gulp?

Добрый день.

Хочу подключить плагины babel для gulp и не получается. Для примера возьмём plugin-transform-block-scoping

package.json
здесь есть всё что нужно
"@babel/core": "^7.13.8",
        "@babel/plugin-transform-arrow-functions": "^7.13.0",
        "@babel/plugin-transform-block-scoping": "^7.12.13",
        "@babel/plugin-transform-runtime": "^7.13.9",
        "@babel/preset-env": "^7.13.9",
        "browser-sync": "^2.26.14",
        "gulp": "^4.0.2",
        "gulp-babel": "^8.0.0",
        ...


gulpfile.js
"use strict";

const {src, dest} = require("gulp");
const gulp = require("gulp");
const babel = require('gulp-babel');
....


и его js задача
function js() {
    return src(path.src.js, {base: './src/assets/js/'})
        .pipe(babel())
        .pipe(plumber())
        .pipe(rigger())
        .pipe(gulp.dest(path.build.js))
        .pipe(uglify())
        .pipe(rename({
            suffix: ".min",
            extname: ".js"
        }))
        .pipe(dest(path.build.js))
        .pipe(browsersync.stream());
}


Файл .babelrc (, - находится на уровне gulpfile.js)
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "esmodules": true
        }
      }
    ]
  ],
  "plugins": ["@babel/plugin-transform-block-scoping"]
}


Файл app.js содержит подключение полифила
//= ../../../../../../node_modules/@babel/polyfill/dist/polyfill.js

/*далее мой код*/


запуск отрабатывает без ошибок

Но стоит написать, например
let drink = 1;
как я вижу сообщение
[18:52:01] Plumber found unhandled error:
 GulpUglifyError: unable to minify JavaScript
Caused by: SyntaxError: Unexpected token: name «drink», expected: punc «;»


Ради проверки отключаю Plumber, - ошибка переходит на следующий pipe.

Прим:
Пробовал подключать плагины напрямую в gulpfile вместо конфига и параллельно конфигу (babelrc), - но тоже безрезультатно.
function js() {
    return src(path.src.js, {base: './src/assets/js/'})
        .pipe(babel({
            plugins: [
                '@babel/transform-runtime',
                '@babel/transform-block-scoping',
            ]
        }))
        .pipe(plumber())
        .pipe(rigger())
        .pipe(gulp.dest(path.build.js))
        .pipe(uglify())
        .pipe(rename({
            suffix: ".min",
            extname: ".js"
        }))
        .pipe(dest(path.build.js))
        .pipe(browsersync.stream());
}
  • Вопрос задан
  • 161 просмотр
Пригласить эксперта
Ваш ответ на вопрос

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

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