browserify中的jQuery没有冲突答案

【问题标题】：No conflict jQuery in browserifybrowserify中的jQuery没有冲突
【发布时间】：2014-12-26 01:48:59
【问题描述】：

我正在处理一个大型遗留项目，我正在使用 browserify、backbone、marionette 构建一些功能。但是，当我将 jQuery 填充到我的 browserify 设置中时，该版本会覆盖在 browserify 脚本加载之前已经加载到我的页面中的不同版本的 jQuery。我不希望这种情况发生。我需要将旧的 jQuery 引用分开。

是否可以让我的已填充 jQuery 引用对我的 browserify 代码完全私有？我认为我需要使用 jQuery 的无冲突模式，但是如何在浏览器的 grunt 配置设置中执行此操作。

这是我当前在 grunt 中的 browserify 设置。

        vendor: {
            src: ['www/libs/*.js'],
            dest: 'www/javascript/built/vendor.js',
            options: {
                shim: {
                    jquery: {
                        path: 'www/bower_components/jquery/jquery.js',
                        exports: 'jQuery'
                    },
                    underscore: {
                        path: 'www/bower_components/underscore/underscore.js',
                        exports: '_'
                    },
                    backbone: {
                        path: 'www/bower_components/backbone/backbone.js',
                        exports: 'Backbone',
                        depends: {
                            underscore: 'underscore'
                        }
                    },
                    'backbone.marionette': {
                        path: 'www/bower_components/backbone.marionette/lib/backbone.marionette.js',
                        exports: 'Marionette',
                        depends: {
                            jquery: '$',
                            backbone: 'Backbone',
                            underscore: '_'
                        }
                    }
                }
            }
        },

谢谢

【问题讨论】：

标签： jquery gruntjs private browserify shim

【解决方案1】：

我在没有使用 grunt 或 bower 的情况下解决了这个问题，但我认为它可能会翻译。

这需要安装 browserify-shim，尽管可能有一种方法可以直接配置 browserify 来执行此操作，因为它确实具有 shims 的配置选项。

这是我的 package.json：

// aliases for browserify
"browser": {
  "jquery": "./js/vendor/browserify-hax.js",
  // a pre-built jquery
  "static-jquery": "./js/vendor/jquery.js"
},
// tell browserify to use browserify-shim
"browserify": {
  "transform": [
    "browserify-shim"
  ]
},
// Tell browserify shim how to generate module.exports
"browserify-shim": {
  "static-jquery": {
    "exports": "$"
  }
}

在 js/vendor/browserify-hax.js 中：

"use strict";
var jQuery = require('static-jquery');
var nonGlobal = jQuery.noConflict(true);
module.exports = nonGlobal;

在我的应用程序代码中，我可以使用require('jquery')，我将从包中获得一个与现有全局版本不冲突的 jQuery。它应该是安全的，因为在 require'ed 之前实际上并未定义 shimmed 模块。值得向jQuery().jquery 确认库版本在各个地方都符合您的期望。

对我来说，这感觉像是一个非常混乱的解决方案，但是当您已经在全球范围内拥有另一个 jQuery 时，这是我能找到的捆绑 jQuery 的唯一方法。我很想知道您是否可以提出更好的解决方案。

我也尝试过直接从 npm 使用 jQuery，但我无法让它在 browserify 包中正确编译，尽管在 node.js 中直接使用 require 时它工作正常。我坚持使用提交到 git 中的预构建 jquery。

【讨论】：