javascript - 使用 webpack 配置 jquery 插件

Question

我正在尝试配置 jquery 插件 multiselect使用 webpack。

但是我得到了

$(...).multiSelect is not a function

我已将其包含在别名中

alias: {
            'multiSelect': Path.join(__dirname, '../public/plugins/jquery-multi-select/js/jquery.multi-select.js')
          }

webpack.config.js

var Path = require('path')
var ProvidePlugin = require('webpack/lib/ProvidePlugin')

module.exports = {
    module: {
        loaders: [
                { test: /bootstrap\/js\//, loader: 'imports?jQuery=jquery' }
            ]
    },
    resolve: {
      alias: {
        'multiSelect': Path.join(__dirname, '../public/plugins/jquery-multi-select/js/jquery.multi-select.js')
      }
    },
    entry: Path.join(__dirname, '../public/Entry.js'),
    output: {
        path: Path.join(__dirname, '../public'),
        filename: 'bundle.js'
    },
    plugins: [
        new ProvidePlugin({
            jQuery: 'jquery',
            $: 'jquery',
            jquery: 'jquery'
        })
    ],
}

Entry.js

var multiSelect = require('multiSelect')
$('#my-select').multiSelect() // $(...).multiSelect is not a function

Answer 1

多选插件使用 IIFE:

!function ($) {
   ...
}(window.jQuery);

所以你可以尝试像这样更改你的 Entry.js 文件:

window.jQuery = jquery;
var multiSelect = require('multiSelect');
$('#my-select').multiSelect();

或者您可以更改您的webpack.config.js:

new ProvidePlugin({
  jQuery: 'jquery',
  $: 'jquery',
  jquery: 'jquery',
  'window.jQuery': 'jquery'
})