使用 Browserify 导入平滑滚动

Question

我不确定我是否正确理解了 Browserify，但我是否能够在我的 app.js 文件中 require() 这个 smooth-scroll 插件（通过 npm 安装）并且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 一起工作时遇到了问题。

自适应-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

这是正确的，如果 Smooth Scroll 可以作为 npm 模块使用。如果不是，您可以使用脚本创建自己的模块。然后，browserify 会将所有内容打包到一个 js 文件中。

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

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

您的插件将如下所示：

/*!
 * 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
};

在捆绑包中你会做这样的事情

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 install jquery。因为 jquery 作为常规脚本不会作为模块导出。所以你需要安装 jquery 模块（或者你可以自己导出，但为什么要重新发明轮子？）

然后...

自适应-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();
});

使用 Browserify 导入平滑滚动

Using Browserify to Import Smooth Scroll

javascript

node.js

npm

browserify