javascript - 使用Browserify导入平滑滚动

Question

我不确定我是否正确理解了 Browserify，但我基本上能够 require() 这个 smooth-scroll插件(通过 npm 安装)放在我的 app.js 文件中，而 Browserify 会将其全部捆绑在我的最终 app.js 文件中？

app.js

var ss = require('./smooth-scroll');

$(document).ready(function(){
  ss.init();
});

gulpfile.js

gulp.task('js', function () {
  var browserified = transform(function(filename) {
    var b = browserify(filename);
    return b.bundle();
  });

  return gulp.src('./src/js/app.js')
    .pipe(browserified)
    .pipe(sourcemaps.init({loadMaps: true}))
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest('./_site/public/js'))
});

更新

所以，我正在尝试使用下面的答案创建自己的模块，但在让它与 jquery.adaptive-backgrounds.js 一起工作时遇到问题.

adaptive-backgrounds.js

var $ = require('jquery/dist/jquery');

module.exports = function(){

  /* jshint debug: true, expr: true */
  ;(function($){

    /* Constants & defaults. */
    var DATA_COLOR    = 'data-ab-color';
    var DATA_PARENT   = 'data-ab-parent';
    var DATA_CSS_BG   = 'data-ab-css-background';
    var EVENT_CF      = 'ab-color-found';

    ...

};

app.js

var $ = require('jquery/dist/jquery');
var ab = require('./vendors/adaptive-backgrounds');

$(function(){
  $.ab.run();
});

由于某种原因，自适应背景插件似乎没有在页面上运行。

Answer 1

如果平滑滚动可作为npm模块使用，那么这是正确的。如果不是，您可以使用脚本创建自己的模块。然后，browserify 会将所有内容捆绑到一个 js 文件中。

或者您可以像通常那样将其添加到 bundle 之前的网页中，然后就可以从 bundle 中访问它，因为它将在全局范围内声明。但在这种情况下，请记住，您应该连接生产脚本(以正确的顺序)，以通过最大限度地减少 http 请求数量来减少页面加载时间。

创建您自己的模块非常简单。假设 Smooth Scroll 不能作为 npm 模块使用，您可以简单地将插件包装在匿名函数中，并将该函数分配给 module.exports 然后当您需要修改后的插件时调用 bundle 中的相关变量。

您的插件将如下所示:

/*!
 * jQuery Smooth Scroll - v1.5.2 - 2014-10-01
 * https://github.com/kswedberg/jquery-smooth-scroll
 * Copyright (c) 2014 Karl Swedberg
 * Licensed MIT (https://github.com/kswedberg/jquery-smooth-scroll/blob/master/LICENSE-MIT)
 */

//WE ADD THIS, BECAUSE ITS A DEPENDENCY (downloaded with npm)
var jQuery = require('jquery');

//AND THIS
module.exports = function(){

    //THIS IS THE ORIGINAL CODE
    (function($) {
        var version = '1.5.2',
        optionOverrides = {},
        defaults = {
          exclude: [],
          excludeWithin:[],
          offset: 0,
        //....

//AND WE CLOSE OUR FUNCTION
};

在 bundle 中你会做这样的事情

var SmoothScroll = require('../jquery.smooth-scroll');
var $ = require('jquery');

SmoothScroll();
// From now on Smooth Scroll is available

$('#mydiv').smoothScroll();

需要注意的是:您可以简单地将包装插件代码的现有即时匿名函数分配给 module.exports ，然后简单地调用 require('./jquery.smooth-scroll' ) 会使其在当前范围内可用。但在我看来，更好的做法是用另一个匿名函数包装它来进行调用，使插件显式地可用于当前作用域。

更新

对于你的插件，你应该首先做 npm 安装 jquery。因为 jquery 作为常规脚本不会导出为模块。所以你需要安装 jquery 模块(或者你可以自己导出，但为什么要重新发明轮子？)

然后...

adaptive-backgrounds.js

//Here you have to call your variable jQuery since its named this way when
//it's passed as an argument to the plugin immediate function
var jQuery = require('jquery');

module.exports = function(){

  /* jshint debug: true, expr: true */
  (function($){

    /* Constants & defaults. */
    var DATA_COLOR    = 'data-ab-color';
    var DATA_PARENT   = 'data-ab-parent';
    var DATA_CSS_BG   = 'data-ab-css-background';
    var EVENT_CF      = 'ab-color-found';

    ...

  // This is what I meant
  })(jQuery);
};

app.js

//Now you can use $
var $ = require('jquery');
var ab = require('./vendors/adaptive-backgrounds');

//add this to call the immediate function used to set up the plugin
ab();

$(function(){
  $.ab.run();
});