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

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

В настоящее время я пытаюсь использовать этот плагин jQuery здесь -https://github.com/mbklein/jquery-elastic. В документации Webpack упоминается providePlugin импорт-погрузчик. Я использовал providePlugin, но все еще объект jQuery недоступен. Вот как мой webpack.конфиг.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 не определен

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

требуют не определено'

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

var jQuery = require("jquery")

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

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

});

но это не то, что я хочу сделать, так как это будет означать, что jquery.упругий.источник.js поставляется вместе с моим кодом JavaScript в комплекте.js, и я хочу, чтобы все мои Плагины jQuery были в поставщиках.JS расслоения. Так как я иду о достижении этого?

11 359
javascript jquery webpack kramdown

11 ответов:

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

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

большинство модулей ссылке dist версия

669

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

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

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

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

$ npm i jquery --save

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

69

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

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

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

50

добавьте это в массив плагинов в webpack.конфиг.js

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

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

require('jquery');

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

window.$ = jQuery;
15

я получил вещи, работающие хорошо, подвергая$ и 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'
    })
  ]
}
9

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

в webpack.конфиг.вавилонское столпотворение.js file:

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'
});

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

5

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

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

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

2

это работает для меня на webpack.конфиг.js

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

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

global.jQuery = require('jquery');
2

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

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

<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;
0

в webpack.конфиг.js файл добавить ниже:

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

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

$ npm i jquery --save

в приложение.js файл добавить ниже строки:

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

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

0