jquery - Webpack:如何使 Angular 自动检测 jQuery 并将其用作 angular.element 而不是 jqLit​​e？

Question

我正在使用 Webpack 构建 Angular 1.4 项目。该项目使用了多个 jQuery 插件，这些插件被包装在 Angular 指令中。这些指令在内部使用 angular.element ，可能暗示 angular.element 是真正的 jQuery，而不是 jqLit​​e。

我希望 Angular 自动检测 jQuery 并使用它而不是 jqLit​​e。我试图在我的入口点模块中本地要求 jquery app.js :require('jquery')并使用 require(expose?$!expose?jQuery!jquery) 全局公开 jQuery .

不过，无论我做什么，angular.element指的是jqLit​​e。

<小时/>

我的研究得出了几项发现:

1. 即使作为 CommonJS 模块导入，Angular 也会将自身分配给全局变量 window.angular ，所以我不需要expose与 Webpack 一起使用:Does Angular assign itself to `window.angular` globally, when loaded as CommonJS module? 。
2. ProviderPlugin 似乎并没有解决这个问题:它没有将 jQuery 暴露给全局命名空间；相反，对于每个依赖全局名称 jQuery 的模块，它会插入 require('jquery')在里面。我不是 100% 确定，但看起来 Angular 无法访问 jQuery相反，它直接从全局命名空间尝试访问 window.jQuery在bindJQuery函数，所以这种方法没有帮助: Expose jQuery to real Window object with Webpack .
3. 出于与 ProviderPlugin 相同的原因，imports-loader似乎不合适:Angular 想要 window.jQuery ，不仅仅是 jQuery .
4. 与 expose-loader ，jquery 使其到达 window 对象。 我的问题是 Babel 将其所有导入提升到结果代码中模块的顶部。因此，虽然require(expose?jquery!jquery)之前 import angular from "angular"在源文件中，在包 require("angular") 中位于文件顶部，位于 jquery 之前，因此当导入 Angular 时，jquery 尚不可用。我想知道如何使用具有 ECMA6 导入语法的 Webpack 加载器。
5. 有人建议使用 import语法而不是 require jquery 语法:import "jquery"或import $ from "jquery" ，不是require(jquery) :(彼得·阿维扬诺夫:How to use Webpack loaders syntax ( imports/exports/expose) with ECMAScript 6 imports?)。 jquery源代码是wrapped with a special wrapper ，它标识如何需要 jquery(使用 AMD/require、CommonJS 或全局使用 <script> 语句)。基于此，它设置了一个特殊参数 noGlobal对于 jquery 结构，或者创建 window.jQuery或否，基于 noGlobal 的值。从 jquery 2.2.4 开始，基于 import "jquery" noGlobal === true和window.jQuery未创建。 IIRC，一些旧版本的jquery无法识别import作为 CommonJS 导入并添加 import将 jquery 编辑到全局命名空间，这允许 Angular 使用它。

<小时/>

详细信息:这是我的 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得到这个答案:
The mysterious case of webpack angular and jquery

bob-sponge的答案不太正确 - Provide 插件实际上是在它处理的模块上进行文本替换，因此我们需要提供 window.jQuery (这就是 Angular 正在寻找的)，而不仅仅是 jQuery.

In your webpack.config.js you need to add the following entry to your plugins:

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

This uses the webpack ProvidePlugin and, at the point of webpackification (© 2016 John Reilly) all references in the code to window.jQuery will be replaced with a reference to the webpack module that contains jQuery. So when you look at the bundled file you'll see that the code that checks the window object for jQuery has become this:

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

That's right; webpack is providing Angular with jQuery whilst still not placing a jQuery variable onto the window. Neat huh?