Как использовать Gulp 4 + Babel + Vue?

Question

[Эмиль Рахматуллин]

Хочу использовать на фронтенде современный JS (использовать также Vue с его .vue компонентами).
Хочу организовать всю эту свистопляску на Gulp 4.

Вот мой таск (из поиска взял):

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

Да и require'ы раздражают, но получаю ошибки, когда юзаю import

Всё как бы ок, Babel компилирует, но я получаю ошибки типа:
ReferenceError: exports is not defined

SyntaxError: Cannot use import statement outside a module

Uncaught ReferenceError: require is not defined
И они не кончаются! На поиске всё пишут не однозначно про Babel, Browserfy.
Webpack использовать не хочу.

В ОБЩЕМ. Как мне сделать связку Gulp 4 + Babel + Vue? Можете чётко подсказать список NPM пакетов, Gulp настроек и настройки в .babelrc и package.json?

Comments

[Alex]

Держу в курсе: https://github.com/vitejs/vite/

[Эмиль Рахматуллин]

Alex, ты дурак? Чётко написал - gulp.

Answer 1

[Сергей Левченко]

Вам нужна штука, которая vue компоненты скомпилит в js
Быстрый гуглеж выдал мне вот такой пакет для gulp:
https://www.npmjs.com/package/gulp-vue-module
и еще один способ:
https://medium.com/@danielabro/vue-js-bundled-by-g...

Но как по мне, так это все извращение какое-то, в 2020 использовать gulp? Ничего против gulp не имею, сам долгое время на нем сидел. Но современный фронтенд нормально разрабатывать без webpack/rollup/parcel - почти невозможно. Пользуйтесь vue-cli, либо голый webpack для более тонкой настройки при необходимости.