Erfordert jQuery auf globaler Ebene zur Verwendung mit Jquery UI-Modulen

Question

Ich arbeite an Angular 2, in dem ich jQuery von Jquery ui benötigen würde. Jedes Modul fügt sich selbst zu jQuery hinzu, indem es auf die globale Variable zugreift. Ich habe stundenlang an jeder Ecke von Github und Stackoverflow (und anderen zufälligen Webseiten) nach Lösungen gesucht, aber bis jetzt hat noch niemand gearbeitet.

Methoden Ich habe versucht:

ProvidePlugin für $, jQuery und window.jQuery, setzen loader Importe verschiedene andere Kombinationen von erfordern jQuery an verschiedenen Orten in meinen Stack Loader ich eindeutig etwas fehlt bin Hier. Jedes Mal, wenn ich importieren "jquery-ui" schreiben, erhalte ich „jQuery ist nicht

definiert

Dank.

Mein webpack.config.js (für Entwicklung)

var path = require('path'); 
var autoprefixer = require('autoprefixer'); 
var webpack = require('webpack'); 
const DedupePlugin = require('webpack/lib/optimize/DedupePlugin'); 
const UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin'); 


var commonConfig = { 
    resolve: { 
    extensions: ['', '.ts', '.js'], 
    alias: { 
     'jquery': path.join(__dirname, 'node_modules/jquery/dist/jquery'), 
    } 
    }, 
    module: { 
    loaders: [ 
     // TypeScript 
     { test: /\.ts$/, loaders: ['ts-loader'] }, 

     { test: /\.css$/, loaders: ['style','css'] }, 
     { 
     test: /\.html/, 
     loader: 'html', 
     query: { 
      minimize: true, 
      removeAttributeQuotes: false, 
      caseSensitive: true, 
      // Teach html-minifier about Angular 2 syntax 
      customAttrSurround: [ 
      [/#/, /(?:)/], 
      [/\*/, /(?:)/], 
      [/\[?\(?/, /(?:)/] 
      ], 
      customAttrAssign: [/\)?\]?=/] 
     } 
     }, 
     { test: /\.scss$/, loaders: ['to-string', 'css', 'postcss', 'resolve-url', 'sass?sourceMap'] }, 
     { test: require.resolve('jquery'), loader: 'expose?jQuery!expose?$' } 
    ] 
    }, 
    'uglify-loader': { 
    mangle: false 
    }, 
    postcss: function() { 
    return [autoprefixer]; 
    }, 
    plugins: [ 
    new webpack.optimize.OccurenceOrderPlugin(true), 
    new webpack.DefinePlugin({ 
     ENV: JSON.stringify(process.env.ENV) 
    }) 
    ], 
    devtool: process.env.ENV == 'dev'? 'source-map' : null 
}; 

module.exports=commonConfig; 

Answer 1

mehrere Möglichkeiten, dies zu handhaben :

1- Import jquery als Skript in dir index.html .Dieses sollte einfach sein

2- Import es über webpack;

.

In Ihrem Webpack üblich;

alias: { 
    "jquery-ui": "jquery-ui/jquery-ui.js" 
} 
. 
. 
. 
plugins: [ 
    new webpack.ProvidePlugin({ 
     jQuery: 'jquery', 
     $: 'jquery', 
     jquery: 'jquery' 
    }) 
    , and the rest of you plugins 
] 

In Ihrer Typisierung:

1- Entweder die Quellen herunterladen und irgendwo in Ihren Ordnern setzt es

2- oder verwenden Sie die Typisierungen installieren, es zu installieren: hier ist die Definition:

Jquery Typings

In Ihrem app.ts (die root-Komponente)

declare var jQuery : JQueryStatic; 

und haben einen Blick auf meine anderen zu answer