使用browserify时如何在AngularJS中包含jQuery？

Posted 2023-03-07

【中文标题】使用browserify时如何在AngularJS中包含jQuery？

【英文标题】：How to include jQuery in AngularJS when using browserify?

【发布时间】：2016-06-12 14:51:23

【问题描述】：

我正在使用 node、gulp 和 browserify 来让我的 JS 文件进入正确的顺序并管理模块。我将 jQuery 和 AngularJS 安装为节点模块，并在需要时需要它们。 Angular 默认使用 jqLit​​e 来处理 DOM-Elements。

我知道当 jQuery 在 AngularJS 之前加载时，Angular 将使用 jQuery 而不是 jqLit​​e。

但是在使用 browserify 时如何让 Angular 使用 jQuery。或者：怎么可能需要 jQuery 来调整角度？

现在我只是在做var $ = require("jquery"); 并在需要时使用它。但我想要一个 Angular，它会在做例如时给我原生 jQuery 方法：

app.directive("dir", function () 
    return 
        link : function ($scope, $elem) 
            var a = $elem.width();//jQuery methods currently not available here
        
    ;
);

我真正需要做的事情：

var jQuery = require("jquery");

app.directive("dir", function () 
    return 
        link : function ($scope, $elem) 
            var jqElement = jQuery($elem);
            var a = $jqElement.width();//jQuery methods are available here
        
    ;
);

【问题讨论】：

您需要阅读 browserify 中的外部需求，在最终点击之前，它们可能会有点弯曲。 github.com/substack/node-browserify#external-requires

为什么不使用页面上的脚本引用作为第一个脚本来加载 jquery？

@Igor：这可行，但我想将我所有的脚本捆绑到一个文件中:) 另一方面，我真的很好奇为什么用 browserify 无法实现和 npm 模块。

对于外部知名资源，您应该尝试使用 CDN。如果之前已加载（很可能使用 jquery），它具有浏览器缓存之类的好处，并且不会花费您任何带宽。

CDN 不是一个选项，因为我正在编写一个无法访问网络的网络应用程序。它只是连接到 nodeJS 服务器。

【参考方案1】：

对于 angularjs，这对我有用。

var jQuery = require('jQuery');
var angular = require("angular");

【参考方案2】：

您可以使用browserify-shim

npm install browserify-shim --save-dev

package.json

"browserify": 
  "transform": ["browserify-shim"]
,
"browser": 
  "jquery": "./node_modules/jquery/dist/jquery.js"
,
"browserify-shim": 
  "jquery": "$",
  "angular": 
    "exports": "angular",
    "depends": ["jquery"]
  

【讨论】：

嗨，有希望的方法。我已经安装了 browserify-shim 并更新了我的 package.json。然后我通过 gulp 运行 browserify 但没有任何改变。我错过了什么吗？

有一个例子github.com/thlorenz/browserify-shim/wiki/…

但可能是browserify-shim 你需要像这里github.com/thlorenz/browserify-shim/tree/master/examples/… 那样指定jquery 的路径

您好 Dmitriy，感谢您的帮助。不幸的是，我仍然无法让它工作。我的 package.json 看起来像你的，但是在运行我的 gulp 任务来浏览化之后，我仍然无法在我的指令链接函数中访问 jquery 方法:(

啊，感谢这个答案 (***.com/a/34813884/2577116) 我意识到我仍然需要在某个地方需要 jquery。我认为只要我需要角度，browserify-shim 将始终包含 jquery，但似乎情况并非如此。无论如何，现在它可以工作了:)

【参考方案3】：

对于 AngualrJS 1.x，使用值提供者

var jQuery = require('jQuery');
var app = require('../app');

app.value('jQuery', jQuery);

然后在你需要它的指令或组件中（你不应该需要 jQuery）：

var app = require('../app');

foo.$inject = ['jQuery'];
function foo(jQuery) 
    return 
        restrict: 'A',
        scope: true,
        link: function(element, scope, attr) 

             // I can use jQuery here
             // though I am unsure why
             // I would want to. 

        
    


app.directive('foo', foo);

现在，如果您需要为此指令编写单元测试，您可以在需要时为 jQuery 注入存根。

【参考方案4】：

未经测试，但它应该可以工作，因为 AngularJS 将 jQlite 存储在 angular.element 中：

angular.element = require("jquery");