jQuery и webpack: как требовать

Question

Я знаю, что есть несколько похожих вопросов по stackoverflow относительно этой проблемы, но я следил за их множеством, и они лишь частично помогли.

Я пытаюсь использовать jQuery в своем приложении Angular с помощью webpack. Тем не менее, браузер жалуется, что нет Jquery ($) не было найдено:

Uncaught TypeError: Cannot read property 'fn' of undefined 

и код, который вызывает эту ошибку:

$.fn[_iCheck] = function(options, fire) { ... } 

Я проверил и $ не определено в данный момент код. Я думаю, что я правильно настроил jQuery в webpack. У меня есть НПМ установил его, и я требовать так:

var jQuery = require('jquery'); 

пока я все еще получаю ошибку жалуясь, что $ является неопределенным.

Это мой webpack.config.js. Я удалил сделанные мной модификации, прочитав некоторые из других сообщений в потоке stackoverflow:

var sliceArgs = Function.prototype.call.bind(Array.prototype.slice); 
var toString = Function.prototype.call.bind(Object.prototype.toString); 
var path = require('path'); 
var webpack = require('webpack'); 

module.exports = { 
    devtool: 'source-map', 
    debug: true, 
    devServer: { 
     historyApiFallback: true, 
     contentBase: 'src/public', 
     publicPath: '/__build__' 
    }, 
    entry: { 
     'app': './src/app/bootstrap', 
     'vendor': './src/app/vendor.ts' 
    }, 
    output: { 
     path: root('__build__'), 
     filename: '[name].js', 
     sourceMapFilename: '[name].js.map', 
     chunkFilename: '[id].chunk.js' 
    }, 
    resolve: { 
     extensions: ['', '.ts', '.js', '.json', '.css', '.html'] 
     // , 
     // alias: { jquery: 'jquery/src/jquery'} 
    }, 
    module: { 
     loaders: [ 
      { test: /\.json$/, loader: 'json' }, 
      { test: /\.css$/, loader: 'raw' }, 
      { test: /\.html$/, loader: 'html' }, 
      { 
       test: /\.ts$/, 
       loader: 'ts', 
       exclude: [/\.spec\.ts$/, /\.e2e\.ts$/, /node_modules/] 
      }, 
      { 
       test: /\.scss$/, 
       loaders: ['style', 'css?sourceMap', 'sass?sourceMap'] 
      }, 
      { 
       test: /\.(woff|woff2)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
       loader: "url-loader?limit=10000&minetype=application/font-woff" 
      }, 
      { 
       test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
       loader: "file-loader" 
      } 
     ] 
    }, 
    plugins: [ 
     new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', filename: 'vendor.bundle.js' }), 
     new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery" }) 
    ] 
}; 

function root(args) { 
    args = sliceArgs(arguments, 0); 
    return path.join.apply(path, [__dirname].concat(args)); 
} 

function rootNode(args) { 
    args = sliceArgs(arguments, 0); 
    return root.apply(path, ['node_modules'].concat(args)); 
} 

Может кто-нибудь помочь?

Answer 1

Замените ваш требуйте заявление со следующим:

window.$ = window.jQuery = require('jquery'); 

Это устанавливает $ (и jQuery) свойства на объект окна правильно (по аналогии с использованием тегов сценариев в основной JS)

Answer 2

С WebPack использует модули, но jQuery должен быть глобальным. Обходной путь необходим.

Вы должны использовать expose loader

require("expose?$!jquery"); 

или

module: { 
loaders: [ 
    { test: require.resolve("jquery"), loader: "expose?$!expose?jQuery" }, 
] 
} 

Для более подробного пояснения см: https://65535th.com/jquery-plugins-and-webpack/