如何使用 Gulp 4 连接导入的 js 库？

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));
}

Answer 2

我选择使用 gulp-rollup (https://github.com/mcasimir/gulp-rollup)。这基本上让我导入其他本地 js 文件，汇总将主动将内容导入到一个包含的文件中。或多个文件。

这里是node js包https://www.npmjs.com/package/gulp-rollup

import rollup from 'gulp-rollup';

function scripts() {
  return gulp.src('./assets/src/js/*.js')
  .pipe(rollup({
      allowRealFiles: true, 
      input: [
          './assets/src/js/default-page.js', 
          './assets/src/js/nms-scholarship-page.js',
          './assets/src/js/scholarship-page.js'
      ],
      output: {
          format: 'umd',
      }
  }))
  .pipe(sourcemaps.init({ loadMaps: true }))
  .pipe(babel({
      presets: ['@babel/env'],
   }))
  .pipe(uglify())
  .pipe(minify())
  .pipe(sourcemaps.write('/maps'))
  .pipe(gulp.dest(paths.scripts.dist))
  .pipe(gulp.dest(paths.scripts.static))
}

这目前需要我的 3 个输入并写入 3 个输出。但是，如果你想要一个包，你可以运行一个 concat 函数来连接所有这些。

这个github问题中的代码帮助我理解了代码。 https://github.com/rollup/rollup/issues/2006