Webpack：如何使角度自动检测 jQuery 并将其用作 angular.element 而不是 jqLit​​e？

Question

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

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

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

---

我的研究得出了几个发现：

1. 即使作为 CommonJS 模块导入时，Angular 也会将自己分配给全局变量 window.angular，因此我不需要使用 Webpack Does Angular assign itself to `window.angular` globally, when loaded as CommonJS module? expose。
2. ProviderPlugin 似乎不能解决问题：它不会将 jQuery 暴露给全局命名空间；相反，对于依赖于全局名称 jQuery 的每个模块，它会在其中插入 require('jquery')。我不是 100% 确定，但看起来 Angular 没有直接从全局命名空间访问 jQuery，而是尝试在 bindJQuery 函数中访问 window.jQuery，所以这种方法没有帮助：Expose jQuery to real Window object with Webpack .
3. 出于与 ProviderPlugin 相同的原因，imports-loader 似乎不合适：Angular 想要 window.jQuery，而不仅仅是 jQuery。
4. 使用expose-loader，jquery 使其成为窗口对象。 我的问题是 Babel 在生成的代码中将其所有导入提升到模块的顶部。因此，虽然require(expose?jquery!jquery) 在源文件中位于import angular from "angular" 之前，但在bundle 中require("angular") 位于文件顶部，在jquery 之前，因此在导入Angular 时，jquery 尚不可用。我想知道，如何使用带有 ECMA6 导入语法的 Webpack 加载器。
5. 有人建议在 jquery 中使用 import 语法而不是 require 语法：import "jquery" 或 import $ from "jquery"，而不是 require(jquery)：（Petr Averyanov：How to use Webpack loaders syntax ( imports/exports/expose) with ECMAScript 6 imports?）。 jquery 源代码是wrapped with a special wrapper，它标识了 jquery 是如何被需要的（使用 AMD/require、CommonJS 或全局使用 <script> 语句）。基于此，它为 jquery fabric 设置了一个特殊的参数noGlobal，并根据noGlobal 的值创建或不创建window.jQuery。从 jquery 2.2.4 开始，不会创建 import "jquery" noGlobal === true 和 window.jQuery。 IIRC，一些旧版本的 jquery 没有将 import 识别为 CommonJS 导入并将 imported 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 的回答不太正确 - 提供插件实际上是在它处理的模块上进行文本替换，所以我们需要提供 window.jQuery（这是 angular 正在寻找的）而不仅仅是 @987654326 @。

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

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

这使用 webpack ProvidePlugin 并且，在点 webpackification (© 2016 John Reilly) 代码中的所有引用 window.jQuery 将被替换为对 webpack 模块的引用 包含 jQuery。因此，当您查看捆绑的文件时，您会看到 检查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 变量放在window 上。整齐吧？

Answer 2

!!更新

显然你仍然需要在 ES6 示例中使用 commonJs 对 angular 的要求。

import $ from "jquery"

window.$ = $;
window.jQuery = $;

var angular = require("angular");

以下是原答案

---

---

我想要一个更简单的解决方案。只需将 jQuery 设为全局窗口，以便 Angular 可以识别它：

var $ = require("jquery")

window.$ = $;
window.jQuery = $;

var angular = require("angular");

或者在你的情况下（OUT DATED）：

import $ from "jquery"

window.$ = $;
window.jQuery = $;

import angular from "angular";

我希望这会有所帮助:)

Answer 3

在您的情况下，最好使用ProvidePlugin。只需将此行添加到插件部分的 webpack 配置中，jquery 就会在您的应用程序中可用：

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

Answer 4

有这篇日文文章I want to use the jQuery not jQLite in webpack + AngularJS 似乎在谈论同样的问题（顺便说一句，我还不懂日文）。我用谷歌翻译成英文，感谢 cither 得到这个不错的答案。

他提供了四种方法来解决这个问题：

1. 直接分配给窗口（不是很酷）

   window.jQuery = require('jquery');
   var angular = require('angular');
   console.log(angular.element('body'));
   //[body, prevObject: jQuery.fn.init[1], context: document, selector: "body"]
   

2. 使用expose-loader（好的，但没那么酷）

   npm install --saveDev expose-loader
   

   webpack.config.js

   module.exports = {
       entry: "./index",
       output: {
           path: __dirname,
           filename: "bundle.js"
       },
       module: {
           loaders: [{
               test: /\/jquery.js$/,
               loader: "expose?jQuery"
           }]
       }
   };
   

   用法：

   require('jquery');
   var angular = require('angular');
   console.log(angular.element('body'));
   //[body, prevObject: jQuery.fn.init[1], context: document, selector: "body"]
   

3. 使用expose-loader（更好）

   npm install --saveDev expose-loader
   

   webpack.config.js

       module.exports = {
       entry: "./index",
       output: {
           path: __dirname,
           filename: "bundle.js"
       },
       module: {
           loaders: [{
               test: /\/angular\.js$/,
               loader: "imports?jQuery=jquery"
           }, {
               test: /\/jquery.js$/,
               loader: "expose?jQuery"
           }]
       }
   };
   

   用法：

   var angular = require('angular');
   console.log(angular.element('body'));
   //[body, prevObject: jQuery.fn.init[1], context: document, selector: "body"]
   

4. 使用ProvidePlugin（最佳解决方案）

   这里其实和studds's accepted answer是一样的

   module.exports = {
       entry: "./index",
       output: {
           path: __dirname,
           filename: "bundle.js"
       },
       plugins: [
           new webpack.ProvidePlugin({
               "window.jQuery": "jquery"
           })
       ],
   };
   

   用法：

   var angular = require('angular');
   console.log(angular.element('body'));
   //[body, prevObject: jQuery.fn.init[1], context: document, selector: "body"]
   

我想我会在这里分享这个，因为我们遇到了完全相同的问题。我们在项目中成功使用了expose-loader 解决方案。我想直接在window中注入jquery的ProvidePlugin也是个好主意。

Answer 5

所以，我给出了我的解决方案，它实际上是@BobSponge 答案和@Bob 的提示/cmets 的混搭。所以没有什么原创的，只是展示了对我有用的东西（在一个不使用 Babel / ES6，顺便说一句的项目中）并试图解释它为什么有效......

（最终）技巧确实是使用expose loader。

正如他们页面中所解释的，我们必须输入module.loaders：

{ test: require.resolve("jquery"), loader: "expose?$!expose?jQuery" },

此外，在plugins 列表中，我有：

        new webpack.ProvidePlugin(
        {
            $: 'jquery',
            jQuery: 'jquery',
            _: 'lodash',
            // [...] some other libraries that put themselves in the global scope.
            //angular: 'angular', // No, I prefer to require it everywhere explicitly.
        }),

它实际上在代码中找到这些变量的全局出现，并将它们放入每个模块的本地变量中。就像我一样，它简化了现有项目（从 RequireJS 到 Webpack）的迁移...... 如果您希望在导入中明确说明，我认为我们可以不使用此插件。

而且，重要的是（我认为），在应用程序的入口点，我需要它们按照我想要的顺序。就我而言，我制作了一个供应商捆绑包，所以这就是这个捆绑包中的顺序。

require('jquery');

require('lodash');
// [...]

var angular = require('angular');
// Use the angular variable to declare the app module, etc.

Webpack 将按照它看到requires 的顺序将库添加到相关包中（除非您使用重新排序它们的插件/加载器）。 但是导入是隔离的（没有全局泄漏），因此 Angular 无法看到 jQuery 库。因此需要expose。 （我尝试了window.jQuery = require('jquery');，但没有成功，也许为时已晚。）