使用 Gulp 捆绑了来自 Bower 的库，但在最终结果中无法识别

Question

我是使用Gulp的新手，基本上是参与了一个练习来理解所有这些细节。

我已经通过Bower安装了一个名为Skrollr的软件包 - https://github.com/Prinzhorn/skrollr

吞咽任务

gulp.task('browserify', () => {
    // For the sake of brevity, I'm only listing one package here
    var bower = [
        'bower_components/skrollr/dist/skrollr.min.js',
    ];
    return browserify(bower)
        .bundle()
        .pipe(source('vendor.js'))
        .pipe(gulp.dest('dist/js'));
});

应用.js

skrollr.init({
    smoothScrolling: false,
    mobileDeceleration: 0.004
});

索引.html

<script src="dist/js/vendor.js"></script>
<script src="dist/js/app.js"></script>

skrollr库似乎在供应商内部成功捆绑.js因为代码在那里，库的许可协议也在那里。

但是，当页面加载时，我收到此错误。

未

捕获的引用错误：未定义 Skrollr

当我加载 skrollr 库的 CDN 时，一切正常 - https://cdnjs.com/libraries/skrollr

<script src="https://cdnjs.cloudflare.com/ajax/libs/skrollr/0.6.30/skrollr.min.js"></script>
<script src="dist/js/app.js"></script>

所以当我捆绑它时可能出了什么问题？

另外：

如果你问我为什么要使用Bower（其他地方有人问）？我是新手。我认为这是一个用于包管理的合法工具。

Answer 1

您需要两个browserify任务：

• 一个browserify-vendor任务，用于捆绑供应商文件并公开它们，以便可以从您的应用.js required()它们。
• 一个browserify-app任务，它将应用文件与供应商文件的外部依赖项捆绑在一起。

如下所示：

gulp.task('browserify-vendor', () => {
  var skrollr = './bower_components/skrollr/dist/skrollr.min.js';
  return browserify(skrollr)
    .require(skrollr, {expose:'skrollr'})
    .bundle()
    .pipe(source('vendor.js'))
    .pipe(gulp.dest('dist/js'));
});
gulp.task('browserify-app', () => {
  return browserify('src/js/app.js')
    .external('skrollr')
    .bundle()
    .pipe(source('app.js'))
    .pipe(gulp.dest('dist/js'));
});
gulp.task('browserify', ['browserify-vendor', 'browserify-app']);

最后，您需要从应用中require()浏览器化的skrollr模块.js：

var skrollr = require('skrollr');
skrollr.init({
  smoothScrolling: false,
  mobileDeceleration: 0.004
});

您可能需要查看使用浏览器化捆绑单独的应用程序和供应商文件配方。