Question

我很擅长使用Gulp，并且基本上参与了一项练习，以了解所有这些细节。

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

Gulp任务

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

app.js

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

的index.html

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

skrollr库似乎在vendor.js中成功捆绑，因为代码就在那里，库的许可协议也是如此。

然而，当页面加载时，我收到此错误。

未捕获的ReferenceError：未定义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任务捆绑您的供应商文件并公开它们，以便它们可以从您的 app.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']);

最后，您需要{strong} app.js 中的require()浏览器skrollr模块：

var skrollr = require('skrollr');

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

您可能想查看Using browserify to bundle separate app and vendor files食谱。

使用Gulp将来自Bower的图书馆捆绑在一起，但最终结果无法识别

1 个答案: