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

Question

我正在使用 node、gulp 和 browserify 使我的 JS 文件按正确的顺序排列并管理模块。我将 jQuery 和 AngularJS 安装为 Node 模块，并在需要时需要它们。 Angular 默认使用 jqLit​​e 来处理 DOM 元素。

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

但是如何让 Angular 在使用 browserify 时使用 jQuery 呢？或者:一个人怎么可能需要 jQuery 到 Angular ？

现在我只是在做 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
        }
    };
});

Answer 1

您可以使用 browserify-shim

npm install browserify-shim --save-dev

包.json

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