Gestione della dipendenza del plugin jQuery nel webpack

Sto usando Webpack nella mia applicazione, in cui creo due punti di ingresso: bundle.js per tutti i miei file / codici JavaScript e vendors.js per tutte le librerie come jQuery e React. Cosa devo fare per utilizzare plugin che hanno jQuery come loro dipendenze e voglio averli anche in vendors.js? Cosa succede se quei plugin hanno dipendenze multiple?

Attualmente sto cercando di utilizzare questo plugin jQuery qui - https://github.com/mbklein/jquery-elastic . Le menzioni della documentazione Webpack forniscono Plugin e caricatore di importazioni. Ho usato fornirePlugin, ma l'oggetto jQuery non è ancora disponibile. Ecco come appare il mio 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;

Ma nonostante ciò, genera ancora un errore nella console del browser:

Errore di riferimento non rilevato: jQuery non è definito

Allo stesso modo, quando utilizzo il caricatore importazioni, viene visualizzato un errore,

requisito non definito '

in questa linea:

var jQuery = require("jquery")

Tuttavia, potrei usare lo stesso plug-in quando non lo aggiungo al mio file vendors.js e invece lo richiedevo nel normale modo AMD come come includo i miei altri file di codice JavaScript, come-

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

});

Ma questo non è quello che voglio fare, poiché ciò significherebbe che jquery.elastic.source.js è raggruppato insieme al mio codice JavaScript in bundle.js e voglio che tutti i miei plugin jQuery siano nel bundle vendors.js. Quindi, come posso fare per raggiungere questo obiettivo?

Hai mischiato approcci diversi su come includere moduli di fornitori legacy. Ecco come lo affronterei:

1. Preferisci CommonJS / AMD non miniato rispetto a dist

La maggior parte dei moduli collega la distversione nel mainloro campo package.json. Sebbene ciò sia utile per la maggior parte degli sviluppatori, per il webpack è meglio alias la srcversione perché in questo modo il webpack è in grado di ottimizzare meglio le dipendenze (ad esempio quando si utilizza il DedupePlugin).

// webpack.config.js

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

Tuttavia, nella maggior parte dei casi anche la distversione funziona bene.

2. Utilizzare ProvidePluginper iniettare globali impliciti

La maggior parte dei moduli legacy si basano sulla presenza di specifici globi, come fanno i plugin jQuery su $o jQuery. In questo scenario è possibile configurare il webpack, per anteporre var $ = require("jquery")ogni volta che incontra l' $identificatore globale .

var webpack = require("webpack");

    ...

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

3. Utilizzare il caricatore importazioni per configurarethis

Alcuni moduli legacy si basano thissull'essere l' windowoggetto. Questo diventa un problema quando il modulo viene eseguito in un contesto CommonJS dove thisuguale module.exports. In questo caso è possibile eseguire thisl' override con il caricatore importazioni .

Corri npm i imports-loader --save-deve poi

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

Il caricatore importazioni può anche essere utilizzato per iniettare manualmente variabili di ogni tipo. Ma il più delle volte ProvidePluginè più utile quando si tratta di globi impliciti.

4. Utilizzare il caricatore importazioni per disabilitare AMD

Esistono moduli che supportano diversi stili di modulo, come AMD, CommonJS e legacy. Tuttavia, la maggior parte delle volte controllano prima definee quindi usano del codice strano per esportare le proprietà. In questi casi, potrebbe essere utile forzare il percorso CommonJS impostando define = false.

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

5. Utilizzare il caricatore di script per importare gli script a livello globale

Se non ti interessano le variabili globali e vuoi solo che gli script legacy funzionino, puoi anche usare lo script-loader. Esegue il modulo in un contesto globale, proprio come se li avessi inclusi tramite il <script>tag.

6. Utilizzare noParseper includere grandi distanze

Quando non esiste una versione AMD / CommonJS del modulo e si desidera includere il dist, è possibile contrassegnare questo modulo come noParse. Quindi il webpack includerà semplicemente il modulo senza analizzarlo, che può essere utilizzato per migliorare i tempi di compilazione. Ciò significa che qualsiasi funzionalità che richiede l' AST , come la ProvidePlugin, non funzionerà.

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

Per l'accesso globale a jquery esistono quindi diverse opzioni. Nel mio progetto webpack più recente, volevo l'accesso globale a jquery, quindi ho aggiunto quanto segue alle dichiarazioni dei miei plugin:

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

Ciò significa quindi che jquery è accessibile dal codice sorgente JavaScript tramite riferimenti globali $ e jQuery.

Naturalmente, è necessario aver installato anche jquery tramite npm:

$ npm i jquery --save

Per un esempio funzionante di questo approccio, sentiti libero di fare il fork della mia app su github

Non so se capisco molto bene cosa stai cercando di fare, ma ho dovuto usare i plugin jQuery che richiedevano che jQuery fosse nel contesto globale (finestra) e ho inserito quanto segue nel mio entry.js:

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

Devo solo richiedere dove voglio jqueryplugin.min.jse window.$viene esteso con il plug-in come previsto.

Ho fatto funzionare bene le cose mentre esponevo $e jQuerycome variabili globali con Webpack 3.8.1 e seguenti.

Installa jQuery come dipendenza dal progetto. È possibile omettere @3.2.1di installare l'ultima versione o specificare un'altra versione.

npm install --save jquery@3.2.1

Installa expose-loadercome dipendenza di sviluppo se non è già installato.

npm install expose-loader --save-dev

Configura Webpack per caricare ed esporre jQuery per noi.

// 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'
    })
  ]
}

Aggiungi questo al tuo array di plugin in webpack.config.js

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

quindi richiede jquery normalmente

require('jquery');

Se il dolore persiste nel vedere altri script per vederlo, prova a inserirlo esplicitamente nel contesto globale tramite (nella voce js)

window.$ = jQuery;

Nel tuo file webpack.config.js aggiungi qui sotto:

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

Installa jQuery usando npm:

$ npm i jquery --save

Nel file app.js aggiungi le righe seguenti:

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

Questo ha funzionato per me. :)

Ho provato alcune delle risposte fornite, ma nessuna sembrava funzionare. Quindi ho provato questo:

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

Sembra funzionare indipendentemente dalla versione che sto usando

Funziona con Webpack 3:

nel file webpack.config.babel.js:

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

E usa ProvidePlugin

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

La migliore soluzione che ho trovato è stata:

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

Fondamentalmente, è necessario includere una variabile fittizia su typings.d.ts, rimuovere qualsiasi "import * * da $ da 'jquery" dal codice e quindi aggiungere manualmente un tag allo script jQuery nel proprio html SPA. In questo modo, il webpack non sarà sulla tua strada e dovresti essere in grado di accedere alla stessa variabile jQuery globale in tutti i tuoi script.

Questo funziona per me sul webpack.config.js

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

in un altro javascript o in HTML aggiungere:

global.jQuery = require('jquery');

Modifica: a volte si desidera utilizzare il webpack semplicemente come un modulo bundler per un semplice progetto Web - per organizzare il proprio codice. La seguente soluzione è per coloro che desiderano semplicemente che una libreria esterna funzioni come previsto all'interno dei loro moduli, senza impiegare molto tempo a dedicarsi alle configurazioni del webpack. (Modificato dopo -1)

Soluzione rapida e semplice (es6) se stai ancora lottando o vuoi evitare la configurazione esterna / la configurazione aggiuntiva del plug-in webpack:

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

all'interno di un modulo:

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