将ES6与Webpack 4一起使用时,在需要/导入后“未定义jQuery”

时间:2018-12-23 19:07:03

标签: javascript jquery reactjs webpack-4

我将Webpack 4用于我的React应用程序的构建过程。 我的应用程序使用jQuery,我想使用import jQuery插件,但出现以下错误:

Failed to compile.

./jquery-plugin.js
  Line 3:  'jQuery' is not defined  no-undef

我尝试了herehere所描述的方法,但都没有帮助我。

// app.js

import $ from 'jquery';
// import './jquery-plugin.js';
window.$ = window.jQuery = $;

require('./jquery-plugin.js');

// jquery-plugin.js

(function($) {
  // Plugin code
})(jQuery);

如果我了解this approach在以前的Webpack版本中可以正常工作。

如果我将import jQuery from 'jquery'添加到jquery-plugin.js进行测试,则可以正常工作,但由于它是第三方插件,所以我不能这样做。

有没有人知道如何使jQuery在Webpack 4中全局可见?

UPD:

我使用react-app-rewired来覆盖Webpack配置。这是我的配置:

// config-overrides.js

const webpack = require('webpack');

module.exports = function override(config, env) {
  //do stuff with the webpack config...

  config.module.rules.push({
    // Exposes jQuery for use outside Webpack build
    test: require.resolve('jquery'),
    use: [{
      loader: 'expose-loader',
      options: 'jQuery'
    },{
      loader: 'expose-loader',
      options: '$'
    }]
  });

  config.plugins.push(
    new webpack.ProvidePlugin({
    //provide jquery in all the ways 3rd party plugins might look for it (note that window.$/window.jQuery will not actually set it on the window, which is cool)
    '$': 'jquery',
    'jQuery': 'jquery',
    'window.jQuery': 'jquery',
    'window.$': 'jquery'
  }));

  config.resolve = {
    alias: {
      'jquery-ui': 'jquery-ui-dist/jquery-ui.js'
    },
  };

  return config;
};

1 个答案:

答案 0 :(得分:0)

您需要让webpack知道它是全局的:

import { ProvidePlugin } from 'webpack';

,然后在配置的plugins条目中:

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

应该可以在jquery-plugin.js中解决该问题,并且您也无需在任何地方导入jquery