Jquery UIモジュールでの使用のために、グローバルレベルでjQueryを要求する

Question

私はJQuery UIからjQueryを要求したい角度2を作成しています。各モジュールはグローバル変数にアクセスしてjQueryに自身を追加します。私はGithubとStackoverflow（そして他のランダムなウェブサイト）のソリューションを探しているところを探して何時間も過ごしましたが、これまでのところ一つではありませんでした。私は明らかに何かが欠けている$、jQueryのための

ProvidePluginを、そしてwindow.jQuery、 ローダー 輸入ローダー私のスタック 内の異なる場所でのjQueryを必要とするの 様々な他の組み合わせを公開：私が試してみました

方法ここに。私は輸入 "jqueryの-UI" を書くたびに、私はjQueryのは、（開発用）

感謝。

マイwebpack.config.jsこれを処理する

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

いくつかの方法が定義されていません」を取得します：スクリプトとして

の1-インポートjqueryのあなたの内部のindex.html .Thisはまっすぐでなければなりません

2 - WebPACKを経由して輸入して、

。

あなたのwebpack commonにあります。あなたのタイピングで

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

：

の1-いずれかのソースをダウンロードして、どこかのフォルダに

2-それを置くかタイピングはそれをインストールするためにインストールし使用します。ここでは定義です：

あなたのapp.tsインサイド

Jquery Typings

（ルートコンポーネント）

declare var jQuery : JQueryStatic; 

とjQuery-UIを参照のうえなしanswer