Управление зависимостями плагина jQuery в веб-пакете

Для глобального доступа к jquery существует несколько вариантов. В моем последнем проекте webpack мне нужен глобальный доступ к jquery, поэтому я добавил следующее в мои объявления плагинов:

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

Это значит, что jquery доступен из исходного кода JavaScript через глобальные ссылки $и jQuery.

Конечно, вам нужно также установить jquery через npm:

$ npm i jquery --save

Для рабочего примера этого подхода, пожалуйста, не стесняйтесь разворачивать мое приложение на github

Я не знаю, хорошо ли я понимаю, что вы пытаетесь сделать, но мне пришлось использовать плагины jQuery, которые требовали, чтобы jQuery находился в глобальном контексте (окне), и я ввел следующее в entry.js:

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

Мне просто нужно требовать, где бы я хотел, чтобы jqueryplugin.min.js и window.$ были расширены с плагином, как ожидалось.

Добавьте это в свой массив плагинов в webpack.config.js

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

тогда требуется обычно jquery

require('jquery');

Если боль не позволяет получить другие скрипты, попробуйте явно разместить ее в глобальном контексте через (в записи js)

window.$ = jQuery;

Я попробовал некоторые из предоставленных ответов, но никто из них, похоже, не работал. Затем я попробовал это:

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

Кажется, работает независимо от того, какую версию я использую

Это работает в webpack 3:

в файле webpack.config.babel.js:

resolve: {
    alias: {
         jquery: "jquery/src/jquery"
    },
 ....
}

И используйте ProvidePlugin

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

У меня получилось хорошо работать при экспонировании $ и jQuery в качестве глобальных переменных с помощью Webpack 3.8.1 и следующих.

Установите jQuery в качестве зависимости от проекта. Вы можете опустить @3.2.1, чтобы установить последнюю версию или указать другую версию.

npm install --save [email protected]

Установите expose-loader в качестве зависимостей разработки, если они уже не установлены.

npm install expose-loader --save-dev

Настройте Webpack для загрузки и отображения jQuery для нас.

// webpack.config.js
const webpack = require('webpack')

module.exports = {
  entry: [
    // entry bits
  ],
  output: {
    // output bits
  },
  module: {
    rules: [
      // any other rules
      {
        // Exposes jQuery for use outside Webpack build
        test: require.resolve('jquery'),
        use: [{
          loader: 'expose-loader',
          options: 'jQuery'
        },{
          loader: 'expose-loader',
          options: '$'
        }]
      }
    ]
  },
  plugins: [
    // Provides jQuery for other JS bundled with Webpack
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    })
  ]
}

Это работает для меня на webpack.config.js

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

в другом javascript или в HTML add:

global.jQuery = require('jquery');

Лучшее решение, которое я нашел, это:

https://github.com/angular/angular-cli/issues/5139#issuecomment-283634059

В принципе, вам нужно включить фиктивную переменную в typings.d.ts, удалить из своего кода "import * as" из "jquery", а затем вручную добавить тег в jQuery script в ваш SPA html. Таким образом, веб-пакет не будет на вашем пути, и вы должны иметь доступ к одной и той же глобальной переменной jQuery во всех своих сценариях.

Изменить: иногда вы хотите использовать webpack просто как модуль для простого веб-проекта, чтобы сохранить свой собственный код. Следующее решение для тех, кто просто хочет, чтобы внешняя библиотека работала так, как ожидалось, в своих модулях - без использования большого количества времени для погружения в настройки веб-пакета. (Отредактировано после -1)

Быстрое и простое решение (es6), если вы все еще боретесь или хотите избежать внешней конфигурации config/дополнительного плагина webpack:

<script src="cdn/jquery.js"></script>
<script src="cdn/underscore.js"></script>
<script src="etc.js"></script>
<script src="bundle.js"></script>

внутри модуля:

const { jQuery: $, Underscore: _, etc } = window;