«jQuery не определен» после require / import при использовании ES6 с Webpack 4 - PullRequest
Новая
       1

«jQuery не определен» после require / import при использовании ES6 с Webpack 4

0 голосов
/ 23 декабря 2018

Я использую Webpack 4 для процесса сборки моего приложения React.Мое приложение использует jQuery, и я хочу import плагин jQuery, но получаю следующую ошибку: 

Failed to compile.

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

Я пробовал методы, описанные здесь и здесь но ни один не помог мне.

// app.js 

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

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

// jquery-plugin.js 

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

Если я понимаю , этот подход работает правильно в предыдущих версиях Webpack.

Если я добавляю import jQuery from 'jquery' к jquery-plugin.js для теста, он работает нормально, но я не могу этого сделать, так как онэто сторонний плагин.

У кого-нибудь есть идеи, как сделать jQuery видимым глобально в Webpack 4?

UPD:

Я использую реагировать-приложение-перемонтировано для переопределения конфигурации 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 голосов
/ 23 декабря 2018

вам нужно сообщить webpack, что он глобальный: 

import { ProvidePlugin } from 'webpack';

, а затем в plugins записи вашей конфигурации: 

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

, которая должна решить проблему в jquery-plugin.js и вам также не нужно импортировать jquery куда-либо

...