WebPack：如何使angular自动检测jQuery并将其用作angular.Element而不是jQLite？

Question

我正在使用Webpack构建一个Angular 1.4项目。该项目利用了几个jQuery插件，这些插件被包装成angular指令。这些指令在内部使用angular.element，这可能意味着angular.element是真正的jQuery，而不是jQLite。

我想让angular自动检测jQuery并使用它而不是jQLite。我尝试在入口点模块app.js:require('jquery')中本地要求jquery，并使用require(expose？$！expose？jquery！jquery)全局公开jquery。

尽管如此，无论我做什么，angular.element都引用了JQLite。

我的研究有几个结果：

null

详细信息：下面是我的app.js:

'use strict';

require("expose?$!expose?jQuery!jquery");
require("metisMenu/dist/metisMenu");
require("expose?_!lodash");
require("expose?angular!angular");

import angular from "angular";
import "angular-animate";
import "angular-messages";
import "angular-resource";
import "angular-sanitize";
import "angular-ui-router";
import "bootstrap/dist/css/bootstrap.css";
import "font-awesome/css/font-awesome.css";
import "angular-bootstrap";

require("../assets/styles/style.scss");
require("../assets/fonts/pe-icon-7-stroke/css/pe-icon-7-stroke.css");

// Import all html files to put them in $templateCache
// If you need to use lazy loading, you will probably need
// to remove these two lines and explicitly require htmls
const templates = require.context(__dirname, true, /\.html$/);
templates.keys().forEach(templates);

import HomeModule from "home/home.module";
import UniverseDirectives from "../components/directives";

angular.module("Universe", [
    "ngAnimate",
    "ngMessages",
    "ngResource",
    "ngSanitize",
    "ui.router",
    "ui.bootstrap",

    HomeModule.name,
    UniverseDirectives.name,
])
.config(function($urlRouterProvider, $locationProvider, $stateProvider){
    // $urlRouterProvider.otherwise('/');

    // $locationProvider.html5Mode(true);

    $stateProvider
      .state('test', {
        url: "/test",
        template: "This is a test"
      });
});

Answer 1

我从John-Reilly那里得到了这个答案:
webpack angular和jquery的神秘案例

Bob-Sponge的回答不太正确--Provide插件实际上是在它处理的模块上进行文本替换，因此我们需要提供window.jquery（这是angular正在寻找的），而不仅仅是jquery。

在webpack.config.js中，需要将以下条目添加到插件中：

new webpack.ProvidePlugin({
    "window.jQuery": "jquery"
}),

这使用了webpack ProvidePleugin，并且在WebPackication（©2016年John Reilly）时，代码中对window.jQuery的所有引用都将替换为对包含jQuery的webpack模块的引用。因此，当您查看捆绑文件时，您将看到检查window对象是否有jQuery的代码如下所示：

jQuery = isUndefined(jqName) ?
  __webpack_provided_window_dot_jQuery : // use jQuery (if present)
    !jqName ? undefined : // use jqLite
    window[jqName]; // use jQuery specified by `ngJq`

这是对的；webpack为Angular提供了jQuery，但仍然没有将jQuery变量放置到窗口上。很漂亮吧？