Не подключаются модули через Import

Question

Уже сутки не могу понять почему у меня не работает или babel для gulp или я модули неправильно подключаю...
Ошибка в браузере такая:

Uncaught ReferenceError: require is not defined
  at main.min.js:1

Подключаю модули так:

import focus_visible from "focus-visible";

Код в файле main.min.js:

"use strict";var e;(e=require("focus-visible"))&&e.__esModule;

Таск в галпе:

const { src, dest, series, watch, parallel } = require('gulp'),
      fileinclude = require('gulp-file-include'),
      rename = require("gulp-rename"),
      uglify = require('gulp-uglify-es').default,
      babel = require("gulp-babel"),
      notify = require("gulp-notify"),
      browserSync = require("browser-sync").create()

const changingScripts = () => {
  return src(['src/js/main.js', 'src/js/pages/**/*.js'])
    .pipe(babel({
      presets: ['@babel/preset-env']
    }))
    .pipe(fileinclude())
    .pipe(dest('dist/js'))
    .pipe(uglify({
      toplevel: true
    }).on('error', notify.onError()))
    .pipe(rename({
      extname: '.min.js'
    }))
    .pipe(dest('dist/js'))
    .pipe(browserSync.stream())
}

Зависимости установлены такие:

"devDependencies": {
  "@babel/core": "^7.16.0",
  "@babel/preset-env": "^7.16.4",
  "browser-sync": "^2.27.7",
  "focus-visible": "^5.2.0",
  "gulp": "^4.0.2",
  "gulp-babel": "^8.0.0",
  "gulp-file-include": "^2.3.0",
  "gulp-notify": "^4.0.0",
  "gulp-rename": "^2.0.0",
  "gulp-uglify-es": "^3.0.0",
}

Вроде как всё приложил то, что нужно.
Если поможете, буду благодарен.
Весь проект встал колом из-за этой ошибки...

Answer 1

В общем, получилось решить проблему.

Для начала, добавим данные зависимости:

1. babelify
2. browserify
3. vinyl-buffer
4. vinyl-source-stream

Подключим их в gulpfile (все кроме babelify):

const browserify = require('browserify');
const vinylStream = require('vinyl-source-stream');
const vinylBuffer = require('vinyl-buffer');

Далее, немного изменим задачу со скриптами:

const changingScripts = () => {
  return browserify(`${sourceFolder}/js/main.js`)
    .transform('babelify', {
      presets: ['@babel/preset-env'],
    })
    .bundle()
    .pipe(vinylStream('main.js'))
    .pipe(vinylBuffer())
    .pipe(dest(path.build.scripts))
    .pipe(uglify({
      toplevel: true,
    }).on('error', notify.onError()))
    .pipe(rename({
      extname: '.min.js',
    }))
    .pipe(dest(path.build.scripts))
    .pipe(browserSync.stream());
};

В целом это всё, что нужно чтобы заработали импорты.

БЛОГ НА HUSL

Не подключаются модули через Import

Ответы (1 шт):