Schließen Sie jQuery in Angular2 mit webpack ein und greifen Sie darauf von der Komponente

Question

zu. Ich möchte jQuery und SignalR in meine Angular2-Anwendung integrieren und alles mit dem Webpack verbinden.

Ich habe daher jQuery über Npm installiert.

package.json

"dependencies": { 
    // ... 
    "jquery": "2.1.4", 
    // ... 
    }, 

Dateien und Ordner werden korrekt installiert.

ich zielen diese Dateien jetzt in meinem vendor.ts webpack zu bekommen zu finden und schließen sie:

import 'jquery'; 
import 'bootstrap/dist/js/bootstrap.js'; 
import '../../bower_components/signalr/jquery.signalR'; 

Und webpack bekommt diese Dateien und Drähte sie. Ich kann das in meinem vendor.js sehen. jQuery ist dort präsent. Auch das jquery-SignalR-File.

Mein webpack.config:

var webpack = require("webpack"); 
var HtmlWebpackPlugin = require('html-webpack-plugin'); 

module.exports = { 
    entry: { 
     "vendor": "./wwwroot/app/vendor", 
     "polyfills": "./wwwroot/app/polyfills", 
     "app": "./wwwroot/app/boot" 
    }, 
    output: { 
     path: __dirname, 
     filename: "[name]-[hash:8].bundle.js" 
    }, 
    resolve: { 
     extensions: ['', '.ts', '.js', '.html'] 
    }, 
    devtool: 'source-map', 
    module: { 
     loaders: [ 
      { 
       test: /\.ts/, 
       loaders: ['ts-loader'], 
       exclude: /node_modules/ 
      }, 
      { 
       test: /\.html$/, 
       loader: 'html' 
      }, 
      { 
       test: /\.css$/, 
       loader: 'raw' 
      } 
     ] 
    }, 
    plugins: [ 
     new webpack.ProvidePlugin({ 
      jQuery: 'jquery', 
      $: 'jquery', 
      jquery: 'jquery' 
     }), 
     //new webpack.optimize.DedupePlugin(), 
     new webpack.optimize.CommonsChunkPlugin({ 
      name: ["app", "vendor", "polyfills"] 
     }) 
    ] 
} 

in meinem Index Geladen wie:

<script src="js/polyfills-2eba52f6.bundle.js"></script> 
<script src="js/vendor-2eba52f6.bundle.js"></script> 
<script src="js/app-2eba52f6.bundle.js"></script> 

Aber wenn ich versuche, es in meiner angular2 Komponente zu verwenden wie:

// ... 

declare var jQuery:any; 
declare var $:any; 

@Injectable() 
export class MySignalRService { 

    private connection; 

    constructor() { 

     this.connection = $.hubConnection(CONFIGURATION.baseUrls.server + 'signalr/'); 
     jQuery.hubConnection(CONFIGURATION.baseUrls.server + 'signalr/'); 

     // ... 
    } 

    //... 

I immer erhalten Sie die Nachricht, dass

$.hubConnection is not a function

Error: jQuery was not found. Please ensure jQuery is referenced before the SignalR client JavaScript file.

trösten "$" und "jquery" ist undefined.

Was kann ich tun, um auf die Singalr-Funktion im Webpack zuzugreifen?

BR Tenoda

Answer 1

suchte ich Ihr Problem und fanden folgenden Lösungen:

1)

window.jQuery = require("jquery"); 

Verwenden Sie jQuery in Ihrem Eintrag Datei

2) Ändern Sie Ihre zu importieren webpack.config.js

new webpack.ProvidePlugin({ 
    jQuery: 'jquery', 
    $: 'jquery', 
    jquery: 'jquery', 
    'window.jQuery': 'jquery' <== add this line 
}), 

Und dann in Ihrem Eintrag Datei:

import 'jquery'; 

Answer 2

Saubere Lösung: Verwenden Sie belichten-loader !!

npm install expose-loader --save-dev 

in Ihrem vendor.ts

> import 'expose?jQuery!jquery'; 
> import '../node_modules/signalr/jquery.signalR.js'; 

in Ihrem webpack.config.ts

> new ProvidePlugin({ jQuery: 'jquery', $: 'jquery', jquery: 'jquery' }) 

Erläuterung:
Das jquery.signalR.js Skript tatsächlich geschrieben wird, nicht als ein umd-Modul.Was bedeutet, dass es standardmäßig nicht von Webpack geladen werden kann. Das jquery.signalR.js-Skript erfordert keine jquery, sondern setzt voraus, dass Jquery in der globalen Variablen window.jQuery enthalten ist. Wir können dies im Webpack machen, indem wir das jquery-Modul mit dem Expose-Loader importieren. Dieser Loader stellt sicher, dass der exportierte Wert von jquery der globalen Variablen jQuery ausgesetzt ist. So kann das signalr.js-Skript als nächstes Modul geladen werden.

Auch wenn Sie Signierer später mit $ verwenden möchten, müssen Sie auch das provideplugin für das jquery-Modul verwenden. innen webpack.config.js

Answer 3

ich mit SignalR nicht vertraut bin, aber hier sind die Schritte, wie ich ähnliches Problem gelöst, wenn sie versuchen Spectrum jQuery Colorpicker Arbeit auf meine Anwendung zu machen:

1. hinzufügen Libs in package.json Datei, Abhängigkeiten Abschnitt

   "jquery": "3.1.1", 
   "spectrum-colorpicker": "1.8.0" 
   

2. hinzufügen Typisierungen in package.json Datei, devDependenci es Abschnitt

   "@types/spectrum": "1.5.27", 
   "@types/jquery": "2.0.33", 
   

3. Geben Sie Typen in tsconfig.json Datei. Compiler verwendet, um Fehler zu werfen, ohne diesen Eintrag

   "types": ["jquery", "spectrum"] 
   

4. Add webpack Plugin in webpack.common.js

   plugins: [ 
        new webpack.ProvidePlugin({ 
         jQuery: 'jquery', 
         $: 'jquery', 
         jquery: 'jquery' 
        }) 
   ] 
   

5. hinzufügen Einfuhren in vendor.ts Datei

   import 'jquery/dist/jquery.js'; 
   import 'spectrum-colorpicker/spectrum.js'; 
   import 'spectrum-colorpicker/spectrum.css'; 
   

6. Dann fügen Sie in Ihrer Komponente oder Richtlinie die folgenden hinzu Flügel declare-Anweisung

   declare var $ : JQueryStatic; 
   

7. Beispiel für die Nutzung im Code

   $("#" + this.fieldId).spectrum({ 
         preferredFormat: "hex3", 
         showInput: true, 
         showPalette: true, 
         palette: [["red", "rgba(0, 255, 0, .5)", "rgb(0, 0, 255)"]], 
         color: this._color, 
         change: this.colorChanged, 
   }); 
   

Das ist es. Diese Änderungen haben mein Problem gelöst und werden Ihnen hoffentlich helfen und etwas Zeit für andere sparen, die versuchen werden, jQuery plugin auf Angular2-Anwendung arbeiten zu lassen.