How to use Gulp 4 + Babel + Vue?

Question

Frontend

I want to use modern JS on the frontend (also use Vue with its .vuecomponents).
I want to organize all this pandemonium on Gulp 4.

Here is my task (I took it from the search):

const { src, dest, watch, series, parallel } = require('gulp');
const babel = require('gulp-babel');

function js() {
  return src([
    'src/js/app.js'
    ])
  .pipe(babel({
    presets: ["@babel/preset-env"]
  }))
  .pipe(dest('build/js/'))
}

exports.js = js

Yes, and require's are annoying, but I get errors when I use import

Everything seems to be ok, Babel compiles, but I get errors like:
ReferenceError: exports is not defined

SyntaxError: Cannot use import statement outside a module

Uncaught ReferenceError: require is not defined
And they don't end! On the search, everything is written ambiguously about Babel, Browserfy.
I don't want to use webpack.

ALL IN ALL. How do I make Gulp 4 + Babel + Vue bundle? Can you provide a clear list of NPM packages, Gulp settings, and settings in .babelrc and package.json?

Answer 1

You need something that compiles vue components to
js @danielabro/vue-js-bundled-by-g... But as for me, it's all some kind of perversion, in 2020 to use gulp? I have nothing against gulp, I myself have been sitting on it for a long time. But it's almost impossible to develop a modern front-end without webpack/rollup/parcel. Use vue-cli or naked webpack for finer tuning if needed.