Grunt Browserify - 在两个库加载之间执行脚本答案

【问题标题】：Grunt Browserify - Executing a script between two library loadsGrunt Browserify - 在两个库加载之间执行脚本
【发布时间】：2014-03-19 09:46:28
【问题描述】：

我正在使用 grunt-browserify 来处理需要服务器端的请求，然后再向客户端提供唯一的 JS。

就像暴露的 here 一样，我想用 shim 加载我的库并将它们完全放在“vendor.js”中，然后加载我的应用程序的 JS，执行要求并将结果放入“app.js” ，然后使用 concat 将它们放在客户端的“main.js”文件中。

问题是我正在使用 jquery、jquery mobile 和骨干网。为了使 jqm 和骨干网可以一起使用，我必须在加载 jqm 库之前禁用 jqm 路由器。使用简单的脚本标签，我曾经按顺序加载 jQuery，然后是禁用 jQM 路由器的 javascript，然后是 jQM，然后是主干。

现在我不知道如何告诉 browserify 以相同的顺序加载脚本。这是我的 gruntfile（浏览部分）：

browserify: {
  vendor: {
    src: ['client/lib/**.js'],
    dest: 'client/build/vendor.js',
    options: {
      shim: {
        jquery: {
          path: 'client/lib/jquery-1.11.0.js',
          exports: '$'
        },
        'jquery.mobile.config': {
          path: 'client/lib/jquery.mobile-config.js',
          exports: null,
          depends: {
            jquery: '$'
          }
        },
        'jquery.mobile': {
          path: 'client/lib/jquery.mobile-1.4.2.js',
          exports: 'jqm',
          depends: {
            jquery: '$',
            'jquery.mobile.config' : 'jquery.mobile.config'
          }
        },
        underscore: {
          path: 'client/lib/underscore.js',
          exports: '_'
        },
        backbone: {
          path: 'client/lib/backbone.js',
          exports: 'Backbone',
          depends: {
            underscore: 'underscore'
          }
        }
      }
    }
  },
  app: {
    files: {
      'client/app/**.js': ['client/build/app.js']
    }
  }
},

这里是 jquery.mobile.config 脚本：

$(document).bind("mobileinit", function () {
$.mobile.ajaxEnabled = false;
$.mobile.linkBindingEnabled = false;
$.mobile.hashListeningEnabled = false;
$.mobile.pushStateEnabled = false;

    // Remove page from DOM when it's being replaced
    $('div[data-role="page"]').on('pagehide', function (event, ui) {
        $(event.currentTarget).remove();
    });
});

简而言之，我尝试这样做：Backbone + JQuery Mobile + RequireJS 但使用 grunt-browserify 而不是 requirejs

【问题讨论】：

标签： javascript jquery-mobile backbone.js gruntjs browserify

【解决方案1】：

我找到了一个 hacky 解决方案，它包括在 jquery-mobile 的开头连接 jqm conf 脚本，然后再对其进行浏览。

concat: {
  test: {
    options: {
      separator: ';'
    },
    src : ['client/lib/jqm/jquery.mobile-config.js', 'client/lib/jqm/jquery.mobile-1.4.2.js'],
    dest: 'client/lib/jquery.mobile-1.4.2.configured.js'
  }

...

browserify: {
  lib: {
    src: ['client/lib/*.js'],
    dest: 'client/build/temp/lib.js',
    options: {
      shim: {
        jquery: {
          path: 'client/lib/jquery-1.11.0.js',
          exports: '$'
        },
        'jquery.mobile': {
          path: 'client/lib/jquery.mobile-1.4.2.configured.js',
          exports: '$',
          depends: {
            jquery: '$'
          }
        },
        underscore: {
          path: 'client/lib/underscore.js',
          exports: '_'
        },
        backbone: {
          path: 'client/lib/backbone.js',
          exports: 'Backbone',
          depends: {
            jquery: '$',
            underscore: '_'
          }

这可行，避免直接修改任何库，但感觉很hacky。如果有人想出更好的东西那就太好了

【讨论】：