Angualr 2 + Typcript + jQuery + webpack: $ не определено

Question

Как говорится, я разрабатываю приложение Angular 2 с использованием машинописных файлов, jquery и webpack (для файлов js и css).

От контроллера, когда мне нужно получить доступ к JQuery ($) Я всегда импортировать это нравится:

var $: JQueryStatic = require('jquery'); 

в верхней части каждого контроллера, который нужно функции JQuery.

Для получения дополнительной информации, вот мой webpack.config файл:

const path = require('path'); 
const webpack = require('webpack'); 
const ExtractTextPlugin = require('extract-text-webpack-plugin'); 
const merge = require('webpack-merge'); 

module.exports = (env) => { 
    const extractCSS = new ExtractTextPlugin('vendor.css'); 
    const isDevBuild = !(env && env.prod); 
    const sharedConfig = { 
     stats: { modules: false }, 
     resolve: { extensions: ['.js'] }, 
     module: { 
      rules: [ 
       { test: /\.(png|woff|woff2|eot|ttf|svg)(\?|$)/, use: 'url-loader?limit=100000' }, 
       { test: /jquery-mousewheel/, loader: "imports-loader?define=>false&this=>window" }, 
       { test: /malihu-custom-scrollbar-plugin/, loader: "imports-loader?define=>false&this=>window" } 
      ] 
     }, 
     entry: { 
      vendor: [ 
       '@angular/common', 
       '@angular/compiler', 
       '@angular/core', 
       '@angular/flex-layout', 
       '@angular/http', 
       '@angular/material', 
       '@angular/platform-browser', 
       '@angular/platform-browser-dynamic', 
       '@angular/router', 
       '@angular/platform-server', 
       'angular2-universal', 
       'angular2-universal-polyfills', 
       'bootstrap', 
       //'bootstrap/dist/css/bootstrap.css', 
       'es6-shim', 
       'es6-promise', 
       'font-awesome/css/font-awesome.css', 
       'event-source-polyfill', 
       'hammerjs', 
       'jquery', 
       'jquery-mousewheel', 
       'malihu-custom-scrollbar-plugin', 
       'malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css', 
       'swiper', 
       'swiper/dist/css/swiper.css', 
       'zone.js', 
      ] 
     }, 
     output: { 
      publicPath: '/dist/',  // Specifies the public URL address of the output files when referenced in a browser 
      filename: '[name].js',  // Specifies the name of each output file on disk 
      library: '[name]_[hash]' // Export the bundle as library with that name 
     }, 
     plugins: [ 
      new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', jquery: 'jquery', Hammer: "hammerjs/hammer" }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable) 
      new webpack.ContextReplacementPlugin(/\@angular\b.*\b(bundles|linker)/, path.join(__dirname, './ClientApp')), // Workaround for https://github.com/angular/angular/issues/11580 
      new webpack.IgnorePlugin(/^vertx$/) // Workaround for https://github.com/stefanpenner/es6-promise/issues/100 
     ] 
    }; 

    const clientBundleConfig = merge(sharedConfig, { 
     output: { path: path.join(__dirname, 'wwwroot', 'dist') }, 
     module: { 
      rules: [ 
       { test: /\.css(\?|$)/, use: extractCSS.extract({ use: 'css-loader' }) } 
      ] 
     }, 
     plugins: [ 
      extractCSS, 
      new webpack.DllPlugin({ 
       path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'), 
       name: '[name]_[hash]' 
      }) 
     ].concat(isDevBuild ? [] : [ 
      new webpack.optimize.UglifyJsPlugin() 
     ]) 
    }); 

    const serverBundleConfig = merge(sharedConfig, { 
     target: 'node', 
     resolve: { mainFields: ['main'] }, 
     output: { 
      path: path.join(__dirname, 'ClientApp', 'dist'), 
      libraryTarget: 'commonjs2', 
     }, 
     module: { 
      rules: [{ test: /\.css(\?|$)/, use: ['to-string-loader', 'css-loader'] }] 
     }, 
     entry: { vendor: ['aspnet-prerendering'] }, 
     plugins: [ 
      new webpack.DllPlugin({ 
       path: path.join(__dirname, 'ClientApp', 'dist', '[name]-manifest.json'), 
       name: '[name]_[hash]' 
      }) 
     ] 
    }); 

    return [clientBundleConfig, serverBundleConfig]; 
} 

Есть ли способ, чтобы не делать эту декларацию каждый раз?

Заранее спасибо

Answer 1

Да, вы можете сделать это, если вы обновляете плагин в вашем webpack.config.js таким образом:

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

не забудьте перед установкой необходимых зависимостей:

npm install jquery --save 
npm install @types/jquery --save-dev