M
M
michaelromanov902021-03-08 13:57:36
gulp.js
michaelromanov90, 2021-03-08 13:57:36

How to include babel plugins for gulp?

Good afternoon.

I want to connect babel plugins for gulp and it doesn't work. For example, let's take the plugin-transform-block-scoping

package.json
here is everything you need

"@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');
....


and its js task
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 file (, - located at gulpfile.js level)
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "esmodules": true
        }
      }
    ]
  ],
  "plugins": ["@babel/plugin-transform-block-scoping"]
}


The app.js file contains the polyfill connection
//= ../../../../../../node_modules/@babel/polyfill/dist/polyfill.js

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


the launch works without errors

But it's worth writing, for example, how I see the message
let drink = 1;
[18:52:01] Plumber found unhandled error:
 GulpUglifyError: unable to minify JavaScript
Caused by: SyntaxError: Unexpected token: name «drink», expected: punc «;»


For the sake of verification, I turn off Plumber - the error goes to the next pipe.

Note:
I tried to include plugins directly in gulpfile instead of config and in parallel with config (babelrc) - but also to no avail.
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());
}

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question