Zarządzanie zależnością wtyczki jQuery w pakiecie internetowym

Używam Webpack w mojej aplikacji, w której tworzę dwa punkty wejścia - bundle.js dla wszystkich moich plików / kodów JavaScript i vendors.js dla wszystkich bibliotek takich jak jQuery i React. Co mam zrobić, aby korzystać z wtyczek, które mają zależności jQuery i chcę mieć je również w vendors.js? Co jeśli te wtyczki mają wiele zależności?

Obecnie próbuję użyć tej wtyczki jQuery tutaj - https://github.com/mbklein/jquery-elastic . Dokumentacja pakietu Webpack wspomina o opcji Plugin i moduł ładujący import. Korzystałem z programu enablePlugin, ale obiekt jQuery wciąż nie jest dostępny. Oto jak wygląda mój plik 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;

Mimo to nadal wyświetla błąd w konsoli przeglądarki:

Uncaught ReferenceError: jQuery nie jest zdefiniowany

Podobnie, gdy używam modułu ładującego import, zgłasza błąd,

wymaganie nie jest zdefiniowane ”

w tej linii:

var jQuery = require("jquery")

Mogę jednak użyć tej samej wtyczki, jeśli nie dodam jej do mojego pliku vendors.js i zamiast tego wymagam jej w normalny sposób AMD, ponieważ dołączam inne pliki kodu JavaScript, takie jak-

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

});

Ale nie chcę tego robić, ponieważ oznaczałoby to, że plik jquery.elastic.source.js znajduje się w pakiecie wraz z moim kodem JavaScript w pakiecie.js i chcę, aby wszystkie moje wtyczki jQuery znajdowały się w pakiecie vendors.js. Jak mam to osiągnąć?

Mieszałeś różne podejścia do włączania starszych modułów dostawców. Oto jak sobie z tym poradzę:

1. Preferuj niezminimalizowane CommonJS / AMD dist

Większość modułów łączy distwersję w swoim mainpolu package.json. Chociaż jest to przydatne dla większości programistów, w przypadku pakietu WWW lepiej jest dokonać aliasu srcwersji, ponieważ w ten sposób pakiet może lepiej zoptymalizować zależności (np. Podczas korzystania z DedupePlugin).

// webpack.config.js

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

Jednak w większości przypadków distwersja działa również dobrze.

2. Użyj ProvidePlugindo wstrzyknięcia niejawnych globałów

Większość starszych modułów polega na obecności określonych globałów, takich jak wtyczki jQuery na $lub jQuery. W tym scenariuszu możesz skonfigurować pakiet WWW, aby był var $ = require("jquery")on przygotowywany za każdym razem, gdy napotka globalny $identyfikator.

var webpack = require("webpack");

    ...

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

3. Skorzystaj z modułu ładującego import, aby skonfigurowaćthis

Niektóre starsze moduły polegają na thisbyciu windowobiektem. Staje się to problemem, gdy moduł jest wykonywany w kontekście CommonJS, gdzie thisjest równy module.exports. W takim przypadku możesz zastąpić thisprogram ładujący import .

Uruchom npm i imports-loader --save-devi wtedy

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

Moduł importujący może także służyć do ręcznego wstrzykiwania zmiennych wszelkiego rodzaju. Ale przez większość czasu ProvidePluginjest to bardziej przydatne, jeśli chodzi o ukryte globale.

4. Użyj modułu importującego, aby wyłączyć AMD

Istnieją moduły obsługujące różne style modułów, takie jak AMD, CommonJS i starsze wersje. Jednak przez większość czasu najpierw sprawdzają, definea następnie używają dziwnego kodu do eksportowania właściwości. W takich przypadkach może pomóc wymusić ścieżkę CommonJS przez ustawienie define = false.

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

5. Użyj programu ładującego skrypty do globalnego importowania skryptów

Jeśli nie interesują Cię zmienne globalne i po prostu chcesz, aby starsze skrypty działały, możesz także użyć programu ładującego skrypty. Wykonuje moduł w kontekście globalnym, tak jakbyś umieścił je za pomocą <script>znacznika.

6. Użyj, noParseaby uwzględnić duże odległości

Jeśli nie ma wersji modułu AMD / CommonJS i chcesz dołączyć dist, możesz oflagować ten moduł jako noParse. Następnie webpack po prostu obejmie moduł bez analizowania go, co można wykorzystać do poprawy czasu kompilacji. Oznacza to, że żadna funkcja wymagająca AST , taka jak ProvidePlugin, nie będzie działać.

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

Aby uzyskać globalny dostęp do jquery, istnieje kilka opcji. W moim najnowszym projekcie pakietu internetowego chciałem globalnego dostępu do jquery, więc do moich deklaracji wtyczek dodałem następujące elementy:

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

Oznacza to, że jquery jest dostępne z poziomu kodu źródłowego JavaScript poprzez globalne odwołania $ i jQuery.

Oczywiście musisz także zainstalować jquery za pośrednictwem npm:

$ npm i jquery --save

Przykładem takiego podejścia jest rozwidlenie mojej aplikacji na github

Nie wiem, czy dobrze rozumiem, co próbujesz zrobić, ale musiałem użyć wtyczek jQuery, które wymagały, aby jQuery znajdowało się w kontekście globalnym (okno) i umieściłem w moim entry.js:

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

Muszę tylko wymagać, gdziekolwiek chcę jqueryplugin.min.jsi window.$jest rozszerzony o wtyczkę zgodnie z oczekiwaniami.

Sprawiłem, że wszystko działało ładnie podczas wyświetlania $i jQueryjako zmienne globalne w Webpack 3.8.1 i następnych.

Zainstaluj jQuery jako zależność projektu. Możesz pominąć @3.2.1instalację najnowszej wersji lub podać inną wersję.

npm install --save jquery@3.2.1

Zainstaluj expose-loaderjako zależność programistyczną, jeśli jeszcze nie została zainstalowana.

npm install expose-loader --save-dev

Skonfiguruj Webpack, aby ładował i ujawniał dla nas 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'
    })
  ]
}

Dodaj to do tablicy wtyczek w webpack.config.js

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

następnie normalnie wymagaj jquery

require('jquery');

Jeśli ból nadal występuje, aby inne skrypty go widziały, spróbuj jawnie umieścić go w kontekście globalnym za pośrednictwem (w pozycji js)

window.$ = jQuery;

W pliku webpack.config.js dodaj poniżej:

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

Zainstaluj jQuery przy użyciu npm:

$ npm i jquery --save

W pliku app.js dodaj poniższe wiersze:

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

To zadziałało dla mnie. :)

Wypróbowałem niektóre z dostarczonych odpowiedzi, ale żadna z nich nie działała. Potem spróbowałem:

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

Wydaje się działać bez względu na to, której wersji używam

Działa to w pakiecie internetowym 3:

w pliku webpack.config.babel.js:

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

I użyj ProvidePlugin

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

Najlepsze rozwiązanie, jakie znalazłem, to:

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

Zasadniczo musisz dołączyć zmienną fikcyjną do typings.d.ts, usunąć wszelkie „import * as $ z„ jquery ”z kodu, a następnie ręcznie dodać znacznik do skryptu jQuery do html SPA. W ten sposób webpack nie będzie na twojej drodze i powinieneś mieć dostęp do tej samej globalnej zmiennej jQuery we wszystkich swoich skryptach.

Działa to dla mnie na webpack.config.js

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

w innym javascript lub w HTML dodaj:

global.jQuery = require('jquery');

Edycja: Czasami chcesz używać pakietu web po prostu jako programu pakującego moduły do ​​prostego projektu internetowego - w celu uporządkowania własnego kodu. Poniższe rozwiązanie jest przeznaczone dla tych, którzy chcą tylko, aby biblioteka zewnętrzna działała zgodnie z oczekiwaniami w swoich modułach - bez poświęcania dużo czasu na konfigurowanie pakietu WWW. (Edytowane po -1)

Szybkie i proste rozwiązanie (es6), jeśli nadal masz problemy lub chcesz uniknąć konfiguracji zewnętrznej / dodatkowej konfiguracji wtyczki pakietu sieciowego:

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

wewnątrz modułu:

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