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

453

Я использую Webpack в своем приложении, в котором я создаю две точки входа - bundle.js для всех моих файлов / кодов JavaScript и vendors.js для всех библиотек, таких как jQuery и React. Что я делаю для того, чтобы использовать плагины, которые имеют jQuery в качестве своих зависимостей, и я хочу, чтобы они были также в vendors.js? Что если эти плагины имеют несколько зависимостей?

В настоящее время я пытаюсь использовать этот плагин jQuery здесь - https://github.com/mbklein/jquery-elastic . В документации веб-пакета упоминаются предоставленный плагин и импорт-загрузчик. Я использовал providePlugin, но все же объект jQuery недоступен. Вот как выглядит мой webpack.config.js:

var webpack = require('webpack');
var bower_dir = __dirname + '/bower_components';
var node_dir = __dirname + '/node_modules';
var lib_dir = __dirname + '/public/js/libs';

var config = {
    addVendor: function (name, path) {
        this.resolve.alias[name] = path;
        this.module.noParse.push(new RegExp(path));
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: "jquery",
            jquery: "jQuery",
            "window.jQuery": "jquery"
        }),
        new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js', Infinity)
    ],
    entry: {
        app: ['./public/js/main.js'],
        vendors: ['react','jquery']
    },
    resolve: {
        alias: {
            'jquery': node_dir + '/jquery/dist/jquery.js',
            'jquery.elastic': lib_dir + '/jquery.elastic.source.js'
        }
    },
    output: {
        path: './public/js',
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            { test: /\.js$/, loader: 'jsx-loader' },
            { test: /\.jquery.elastic.js$/, loader: 'imports-loader' }
        ]
    }
};
config.addVendor('react', bower_dir + '/react/react.min.js');
config.addVendor('jquery', node_dir + '/jquery/dist/jquery.js');
config.addVendor('jquery.elastic', lib_dir +'/jquery.elastic.source.js');

module.exports = config;

Но, несмотря на это, он все равно выдает ошибку в консоли браузера:

Uncaught ReferenceError: jQuery не определен

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

требование не определено

в этой строке:

var jQuery = require("jquery")

Тем не менее, я мог бы использовать тот же плагин, когда не добавлял его в файл vendors.js, а вместо этого требовал его обычным способом AMD, как то, как я включаю мои другие файлы кода JavaScript, например:

define(
[
    'jquery',
    'react',
    '../../common-functions',
    '../../libs/jquery.elastic.source'
],function($,React,commonFunctions){
    $("#myInput").elastic() //It works

});

Но это не то, что я хочу сделать, так как это означает, что jquery.elastic.source.js связан с моим кодом JavaScript в bundle.js, и я хочу, чтобы все мои плагины jQuery были в комплекте vendors.js. Так как же мне добиться этого?

booleanhunter
источник
3
Не уверен, что это ваша проблема, но вам определенно нужно изменить windows.jQuery на "window.jQuery": "jquery". На веб-сайте веб-пакета есть опечатка, на которой, я полагаю, вы получили этот код.
Алекс Хокинс
@AlexHawkins О да, я заметил это и исправил. Спасибо за указание на это!
booleanhunter

Ответы:

772

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

1. Предпочитаю унифицированный CommonJS / AMD, а не dist

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

// webpack.config.js

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

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


2. Используйте, ProvidePluginчтобы ввести неявные глобалы

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

var webpack = require("webpack");

    ...

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

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

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

Беги npm i imports-loader --save-devа потом

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

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


4. Используйте import-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>тег.


6. Используйте noParseдля включения больших дисков

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

module: {
    noParse: [
        /[\/\\]node_modules[\/\\]angular[\/\\]angular\.js$/
    ]
}
Йоханнес Эвальд
источник
3
ProvidePluginПрименяются на все вхождения данных идентификаторов во всех файлах. imports-loaderМогут быть применены на конкретные файлы только, но вы не должны использовать как для одних и тех же переменных / зависимостей.
Йоханнес Эвальд
5
Я смущен этим. Откуда на самом деле приходит jquery? Локально или CDN? Все после 3. неясно, нужно ли это. Каковы реальные шаги для интеграции jquery в ваш проект с помощью веб-пакета. Это обходит версию, которая доступна через CDN?
HelpMeStackOverflowMyOnlyHope
3
Все из CDN выходит за рамки веб-пакета, так что это относится к локальной установке jquery. Jquery может просто потребоваться, нет никаких специальных шагов, необходимых для его интеграции. Этот вопрос о том, как интегрировать плагины jquery, которые зависят от глобальной $переменной.
Йоханнес Эвальд
8
Сделал все это, все еще не работает; Затем добавил: "module": { "loaders": [ { test: require.resolve("jquery"), loader: "expose?$!expose?jQuery" },и все работало нормально.
musicformellons
5
Сделайте все это, чтобы просто включить пакет jquery? Что за боль. Я возвращаюсь к своему глотку
Рахул Гупта
89

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

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

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

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

$ npm i jquery --save

Для рабочего примера такого подхода, пожалуйста, не стесняйтесь, чтобы мое приложение раскошелиться на GitHub

arcseldon
источник
2
Пожалуйста, вы можете оставить комментарий, если вы понижаете голосование, объясняя причину. Приведенная выше информация является точной. Пожалуйста, смотрите мое рабочее приложение по адресу: github.com/arcseldon/react-babel-webpack-starter-app, используя вышеуказанный подход.
arcseldon
Я не downvoter, но, может быть, это потому, что ProvidePluginрешение, которое вы предлагаете, уже было предложено?
Лео Лам
@ LéoLam - спасибо за ваш комментарий. цените вашу точку зрения - я вывел ответ через отдельные запросы и просто поделился здесь фрагментом, который, как мне показалось, наиболее актуален для других, желающих подражать тому, что я сделал. Вы правы, хотя, официальный ответ охватывает эту опцию.
arcseldon
1
Это работает, но я получаю 2 предупреждения: ./~/jQuery/dist/jquery.js There is another module with an equal name when case is ignored.и то же самое с./~/jquery/dist/jquery.js
pneou
7
Мне нужно было добавить 'window.jQuery': 'jquery'в этот список, чтобы загрузить пакет ms-signalr-client npm. Я также вставил 'window.$': 'jquery'для хорошей меры :)
Сэмми
57

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

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

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

sanfilippopablo
источник
2
В основном я делал ошибку, используя ProvidePlugin вместе с условием noParse. Плагины, такие как ProvidePlugin, не работают, если мы делаем NoParse, как указано в пункте 6 ответа. Вы можете увидеть эту ошибку в коде
booleanhunter
да, я обнаружил, что он работает более согласованно между плагинами, чем плагины обеспечения и т. д., особенно если вы вводите angular 1.x через скрипт-загрузчик.
Tracker1
27

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

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

npm install --save jquery@3.2.1

Установить 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'
    })
  ]
}
HarlemSquirrel
источник
5
Вы забыли упомянуть, что вам нужно установить expose-loader, чтобы он работал правильно npm install expose-loader --save-dev
Пауло Грайеттнер
4
Это сработало для меня 👍. jquery: 3.3.1, expose-loader: 0.7.5, webpack: 4.20.2
AKT
expose-loadedСделал это для меня. Я не получил ошибку во время компиляции, но в инструментах разработчика Chrome. Это решено сейчас.
Йохан
Спасибо! Это работало с "jquery": "^ 3.4.1" и "webpack": "^ 4.41.5". Это только я, или заставить JQuery работать с Webpack не должно быть смешно?
Карл Алколея
18

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

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

тогда требуется jquery нормально

require('jquery');

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

window.$ = jQuery;
KhaledMohamedP
источник
18

В вашем файле webpack.config.js добавьте ниже:

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

Установите jQuery с помощью npm:

$ npm i jquery --save

В файле app.js добавьте следующие строки:

import $ from 'jquery';
window.jQuery = $;
window.$ = $;

Это сработало для меня. :)

Ashwini
источник
Как это будет действовать, если у вас есть, например. app.js и jquery-module.js, которые оба требуют jquery ?, для меня я получаю jquery13981378127 и jquery12389723198 как экземпляры в окне?
Martea
8

Я попробовал некоторые из предоставленных ответов, но ни один из них, казалось, не работал. Тогда я попробовал это:

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

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

Кэм Туллос
источник
+1 кажется неправильным пониманием того, что добавленные здесь глобальные переменные будут автоматически установлены против окна. Похоже, это не так, как вы должны быть явными.
Джеймс
Правильно, это не добавляет его к объекту окна. Создает псевдоним окна внутри веб-пакета. Поэтому, если вы попытаетесь использовать $вне веб-пакета требуемый файл, он будет неопределенным.
Кэм
7

Это работает в веб-пакете 3:

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

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

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

new webpack.ProvidePlugin({
        '$': 'jquery',
        'jQuery': 'jquery',
    })
SharpCoder
источник
1
Для других, которые очень новы в веб-пакете (как я!), «Resol» идет в вашем webpack.config.js в module.exports = {}, как вход, выход, плагины, модуль и т. Д.
DavGarcia
1
И новый webpack.ProvidePlugin входит в массив плагинов.
DavGarcia
2

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

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

По сути, вам нужно включить фиктивную переменную в typings.d.ts, удалить из кода любой «import * as $ from 'jquery», а затем вручную добавить тег к сценарию jQuery в ваш HTML-код SPA. Таким образом, webpack не будет мешать вам, и вы сможете получить доступ к одной и той же глобальной переменной jQuery во всех ваших скриптах.

Фабрисио
источник
2

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

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

в другом JavaScript или в HTML добавить:

global.jQuery = require('jquery');
JPRLCol
источник
0

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

Быстрое и простое (es6) решение, если вы все еще испытываете трудности или хотите избежать настройки внешнего интерфейса / дополнительной конфигурации плагина 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;
frdnrdb
источник