Как мне объединить импортированные библиотеки js, используя Gulp 4?

Question

У меня есть основной script.js, который импортирует оба написанных мной модуля в дополнение к библиотекам, таким как jQuery и D3.Я пытаюсь изучить Gulp 4 и могу заставить Gulp объединить файлы, которые я написал.Но мои библиотеки, такие как jQuery и D3, не добавляются в мой окончательный файл скриптов.Я не могу понять, как эти библиотеки свернуть в мой окончательный файл сценария.

Мой импорт в моем файле scripts.js, где элемент leagueTeams, кажется, работает нормально ...

import $ from 'jquery';
import * as d3 from 'd3';
import leagueTeams from './league-teams';

js часть моего gulpfile.js ...

// JS FUNCTION
function js() {
  return gulp
    .src(tree.js.src)
    .pipe(plumber())
    .pipe(sourcemaps.init())
    .pipe(babel({
      presets: ['@babel/env'],
    }))
    .pipe(concat('scripts.min.js'))
    .pipe(uglify())
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest(tree.js.dist));
}

Когда запускается browserSync, я получаю сообщение об ошибке ...

Uncaught ReferenceError: exports is not defined

Когда я проверяю мой scripts.min.js он показывает весь мой код, но не jQuery или D3, как ожидалось.

Answer 1

Я обнаружил, что мне не хватает некоторых ключевых компонентов, таких как Babelify и Browserify.Кажется, что следующее работает как ожидалось.

// JS FUNCTION
function js() {
  const b = browserify({
    entries: 'src/js/scripts.js',
    debug: true,
  });

  return b
    .transform(babelify, { presets: ['@babel/preset-env'] })
    .bundle()
    .pipe(source('scripts.js'))
    .pipe(buffer())
    .pipe(sourcemaps.init({ loadMaps: true }))
    .pipe(rename({ extname: '.min.js' }))
    .pipe(uglify())
    .on('error', log.error)
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest(tree.js.dist));
}