2016-09-14 2 views
1

Ich versuche, jQuery Validierung Plugin in meiner Test-App mit webpack zu verwenden, wenn ich import es in meiner Datei bekomme ich diesen Fehler $(...).validate is not a function.

Ich weiß, dass jquery-validation basierend auf IIFE und erforderlichen jquery in globalen Geltungsbereich sein, die ich bereits meine Konfiguration ausgesetzt.

hier ist es selbst:

{ 
    entry: { 
     app: "./assets/js/app.jsx" 
    }, 
    output: { 
     path: path.join(__dirname, "/build/js"), 
     publicPath: "/build/js", 
     filename: "[name].bundle.js" 
    }, 
    resolve: { 
     modulesDirectories: ["node_modules", "bower_components"], 
     alias: { 
      "jquery": "jquery/dist/jquery.min", 
      "jquery.validate": "jquery-validation/dist/jquery.validate" 
     }, 
     extensions: ["", ".js", ".jsx", ".es6"] 
    }, 
    amd: { 
     jQuery: true 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.jsx?$/, 
       exclude: /node_modules/, 
       loader: "babel" 
      }, 
      { 
       test: /jquery.validate/, 
       include: /node_modules/, 
       loader: "imports?jQuery=jquery" 
      } 
     ] 
    }, 
    plugins: [ 
     new webpack.ProvidePlugin({ 
      "$": "jquery", 
      "jQuery": "jquery" 
     }) 
    ], 
    devtool: "source-map" 
} 

und verwenden Sie es mögen:

import "jquery.validate" 

$("#test").validate(); 

P. S. Sieht aus wie jQuery-Validierung Plugin versucht, eigene Instanz von Jquery zu verwenden, fand ich heraus, dass durch $.fn in meiner Datei [jquery: "3.1.0"] und innerhalb IIFE der Validierung Plugin [jquery: "2.2.4"], aber wie man es hochklettern, um meine Version zu verwenden?

Jede Hilfe wäre willkommen.

+0

Sie eine jqury.validate.js Datei vor jqury.js Datei hinzufügen arbeitet oder nach jquery.js-Datei? –

+0

'jquery' wird als global in der webpack-config in' new webpack.ProvidePlugin ({}) 'zur Verfügung gestellt, also ist es schon da – Smile0ff

Antwort

0
resolve: { 
     modulesDirectories: ["node_modules", "bower_components"], 
     alias: { 
"jquery.validate": "jquery-validation/dist/jquery.validate",   
"jquery": "jquery/dist/jquery.min" 

     }, 
     extensions: ["", ".js", ".jsx", ".es6"] 
    }, 

Ändern Sie einfach eine Position der Dateien.

diese Lösung Versuchen Sie, ich hoffe, dass es für Sie

+0

danke für deine Antwort, aber leider tut es nicht den Trick. – Smile0ff

+0

Ok, kein Problem. es ist Arbeit für mich in vielen Anwendungen. –

Verwandte Themen