Управление зависимостью плагина jQuery в webpack

Ответ 1

Вы использовали разные подходы, как включить устаревшие модули поставщиков. Вот как я справился бы с этим:

1. Предпочитайте unminified CommonJS/AMD над dist

Большинство модулей связывают версию dist в поле main своих package.json. Хотя это полезно для большинства разработчиков, для webpack лучше использовать псевдоним версии src, потому что таким образом webpack лучше оптимизирует зависимости (например, при использовании DedupePlugin).

// webpack.config.js

module.exports = {
    ...
    resolve: {
        alias: {
            jquery: "jquery/src/jquery"
        }
    }
};

Однако, в большинстве случаев версия dist работает очень хорошо.

2. Используйте ProvidePlugin для ввода неявных глобальных переменных

Большинство устаревших модулей полагаются на присутствие определенных глобальных переменных, например плагины jQuery на $ или jQuery. В этом случае вы можете настроить webpack, чтобы добавить var $ = require("jquery") каждый раз, когда он встречает глобальный идентификатор $.

var webpack = require("webpack");

    ...

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

3. Используйте imports-loader для настройки this

Некоторые устаревшие модули полагаются на this как объект window. Это становится проблемой, когда модуль выполняется в контексте CommonJS, где this равно module.exports. В этом случае вы можете переопределить this с помощью imports-loader.

Запустите npm i imports-loader --save-dev, а затем

module: {
    loaders: [
        {
            test: /[\/\\]node_modules[\/\\]some-module[\/\\]index\.js$/,
            loader: "imports-loader?this=>window"
        }
    ]
}

Импорт-загрузчик также может использоваться для ручного ввода переменных всех видов. Но большую часть времени ProvidePlugin более полезен, когда дело доходит до неявных глобалов.

4. Используйте imports-loader, чтобы отключить AMD

Существуют модули, поддерживающие разные стили модулей, такие как AMD, CommonJS и legacy. Однако большую часть времени они сначала проверяют на define, а затем используют некоторый причудливый код для экспорта свойств. В этих случаях это может помочь принудительно установить путь CommonJS, установив define = false.

module: {
    loaders: [
        {
            test: /[\/\\]node_modules[\/\\]some-module[\/\\]index\.js$/,
            loader: "imports-loader?define=>false"
        }
    ]
}

5. Используйте script-loader для глобального импорта скриптов

Если вам не нужны глобальные переменные и вы хотите, чтобы устаревшие скрипты работали, вы также можете использовать script -loader. Он выполняет модуль в глобальном контексте, как если бы вы включили их через тег <script>.

6. Используйте noParse, чтобы включить большие кубики

Если версия модуля AMD/CommonJS отсутствует и вы хотите включить dist, вы можете пометить этот модуль как noParse. Тогда webpack будет включать в себя модуль без его разбора, который может быть использован для улучшения времени сборки. Это означает, что любая функция, требующая AST, как и ProvidePlugin, не будет работать.

module: {
    noParse: [
        /[\/\\]node_modules[\/\\]angular[\/\\]angular\.js$/
    ]
}

Ответ 2

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

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

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

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

$ npm i jquery --save

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

Ответ 3

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

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

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

Ответ 4

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

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

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

require('jquery');

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

window.$ = jQuery;

Ответ 5

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

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

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

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

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

Ответ 6

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

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

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

Ответ 7

У меня получилось хорошо работать при экспонировании $ и 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'
    })
  ]
}

Ответ 8

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

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

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

Ответ 9

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

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

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

global.jQuery = require('jquery');

Ответ 10

Изменить: иногда вы хотите использовать 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;