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的{{1}}部分...

gulpfile.js

当browserSync启动时，我收到错误消息...

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

当我检查Uncaught ReferenceError: exports is not defined时，它显示了我的所有代码，但没有显示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));
}

如何使用Gulp 4连接进口的js库？

1 个答案: