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

我正在使用node，gulp和browserify將我的JS文件轉換爲正確的順序並管理模塊。我將jQuery和AngularJS安裝爲節點模塊，並在需要時安裝它們。 Angular默認使用jqLite來處理DOM元素。如何在使用browserify時在AngularJS中包含jQuery？

我知道，當jQuery在AngularJS之前加載時，Angular將使用jQuery而不是jqLite。

但是，如何讓Angular在使用browserify時使用jQuery。或者：如何可能需要jQuery角？

現在我只是在做var $ = require("jquery");並在需要時使用它。不過，我想有一個角度在做例如，當將本機給我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 
     } 
    }; 
});

來源

2016-02-29 Fidel90

你需要在browserify上閱讀外部需求，他們可以有點心靈彎曲，直到它最終點擊。 https://github.com/substack/node-browserify#external-requires –

爲什麼不使用頁面上的腳本引用作爲第一個腳本加載jquery？ – Igor

@Igor：這會工作，但我想將我的所有腳本捆綁到一個文件中:)另一方面，我只是很好奇，爲什麼用browserify和npm模塊無法實現。 – Fidel90

您可以使用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"] 
    } 
}

來源

2016-03-18 13:58:56

嗨，有希望的方法。我安裝了browserify-shim並更新了我的package.json。然後，我正在通過吞噬運行瀏覽器，但沒有任何變化。我錯過了什麼嗎？ – Fidel90

有一個例子https://github.com/thlorenz/browserify-shim/wiki/browserify-shim-recipes#angular-which-depends-on-jquery--angular-modules-installation-via-npm-and- napa –

但它可能是'browserify-shim'，你需要指定一個像這裏https：// github這樣的jquery的路徑。com/thlorenz/browserify-shim/tree/master/examples/shim-jquery –

-1

未經測試，但它應該工作，因爲AngularJS存儲jQlite在angular.element：

angular.element = require("jquery");

來源

2016-03-18 13:51:36 KyleK

我試過了，它對我沒有任何影響。 – Fidel90

對不起，但它不起作用 –

對於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注入存根。

來源

2016-03-18 13:59:10 Martin

for angularjs這適用於我。

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

來源

2017-10-11 08:49:27 ColacX

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

回答

相關問題