Webpack: jak sprawić, by jQuery automatycznie wykrywał kąty i używać go jako angular.element zamiast jqLite?

angular.element

app.js

require ('jquery')

require (expose? $! Expose? jQuery! jquery)

angular.element

• Nawet przy imporcie, gdy moduł kątowy CommonJS przypisuje samą zmienną globalną okno.Andicular , więc nie potrzebuję

  Expose

  It ze WebPack: Czy Angular przypisuje się globalnie do `window.angular 'po załadowaniu jako moduł CommonJS https://coderoad.ru/36101119/ .
• ProviderPlugin nie wydaje się działać: nie zapewnia jQuery globalnej przestrzeni nazw; zamiast tego dla każdego modułu, który zależy od globalnej nazwy jQuery, wstawia do niego

  require ('jquery')

  . Nie jestem w 100% pewien, ale wygląda na to, że Angular nie uzyskuje dostępu do

  jQuery

  bezpośrednio z globalnej przestrzeni nazw, zamiast tego próbuje uzyskać dostęp do

  window.jQuery

  w funkcji

  bindJQuery

  , więc to podejście nie pomaga: wystawiaj jQuery na rzeczywisty obiekt okna za pomocą webpacka https://coderoad.ru/29080148/ .
• Z tego samego powodu co ProviderPlugin,

  import-loader

  wydaje się bezużyteczny: Angular chce

  window.jQuery

  , a nie tylko

  jQuery

  .
• Z

  expose-loader

  jquery dostaje się do obiektu okna. Mój problem polegał na tym, że Babel wypychał wszystkie swoje importy na górę modułu w wynikowym kodzie. Dlatego chociaż

  require (expose Jquery! Jquery)

  był przed

  importem angular z „angular”

  w plikach źródłowych, pakiet

  require („angular”)

  znajduje się na początku pliku, przed jquery, więc zanim Angular zostanie zaimportowany, jquery nie będzie jeszcze dostępne. Zastanawiasz się, jak używać programów ładujących Webpack ze składnią importu ECMA6 [/code]
• Pojawiła się sugestia, aby użyć składni

  import

  zamiast składni

  require

  z jquery:

  import "jquery"

  lub

  import $ from " jquery ”

  , a nie

  require (jquery)

  : (Petr Averyanov: jak używać składni programu ładującego webpack (import/eksport/ekspozycja) z importami ECMAScript 6 https://coderoad.ru/36150641/Źródło ). jQuery. zapakowane w specjalną powłokę https://github.com/jquery/jque ... 23L41który określa, jak wymagane jest jquery (przy użyciu instrukcji AMD/require, CommonJS lub globalnie przy użyciu instrukcji

  & < script & >

  ). Na tej podstawie ustawia specjalny argument

  noGlobal

  dla tkaniny jquery i albo tworzy

  window.jQuery

  , albo nie jest oparty na wartości

  noGlobal

  . Od wersji jquery 2.2.4,

  import "jquery"

  noGlobal === true

  i

  window.jQuery

  nie są generowane. IIRC, niektóre starsze wersje jquery nie rozpoznawały

  import

  jako CommonJS import i dodały

  import

  ed jquery do globalnej przestrzeni nazw, co pozwoliło mu na użycie go przez angular.

'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"

 });

});