Question

我不确定我是否正确理解Browserify，但我能够在我的require()文件中基本上app.js这个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

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

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

创建自己的模块非常简单。假设 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导入平滑滚动

1 个答案: