Administrar la dependencia del complemento jQuery en webpack

Estoy usando Webpack en mi aplicación, en la que creo dos puntos de entrada: bundle.js para todos mis archivos / códigos JavaScript y vendors.js para todas las bibliotecas como jQuery y React. ¿Qué debo hacer para usar complementos que tienen jQuery como sus dependencias y quiero tenerlos también en vendors.js? ¿Qué pasa si esos complementos tienen dependencias múltiples?

Actualmente estoy tratando de usar este complemento jQuery aquí: https://github.com/mbklein/jquery-elastic . La documentación de Webpack menciona providePlugin e Importer - Loader . Usé providePlugin, pero aún así el objeto jQuery no está disponible. Así es como se ve mi 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;

Pero a pesar de esto, todavía arroja un error en la consola del navegador:

Error de referencia no capturado: jQuery no está definido

Del mismo modo, cuando uso el cargador de importaciones, arroja un error,

requerir no está definido '

en esta linea:

var jQuery = require("jquery")

Sin embargo, podría usar el mismo complemento cuando no lo agrego a mi archivo vendors.js y, en su lugar, lo requiero de la forma AMD normal, como la forma en que incluyo mis otros archivos de código JavaScript, como:

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

});

Pero esto no es lo que quiero hacer, ya que esto significaría que jquery.elastic.source.js está incluido junto con mi código JavaScript en bundle.js, y quiero que todos mis complementos jQuery estén en el paquete vendors.js. Entonces, ¿cómo hago para lograr esto?

Ha mezclado diferentes enfoques sobre cómo incluir módulos de proveedores heredados. Así es como lo abordaría:

1. Prefiere CommonJS / AMD no minificados sobre dist

La mayoría de los módulos vinculan la distversión en el maincampo de su package.json. Si bien esto es útil para la mayoría de los desarrolladores, para webpack es mejor usar un alias de la srcversión porque de esta manera webpack puede optimizar mejor las dependencias (por ejemplo, cuando se usa DedupePlugin).

// webpack.config.js

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

Sin embargo, en la mayoría de los casos, la distversión también funciona bien.

2. Use ProvidePluginpara inyectar globals implícitos

La mayoría de los módulos heredados dependen de la presencia de globales específicos, como lo hacen los complementos jQuery en $o jQuery. En este escenario, puede configurar el paquete web, para anteponer var $ = require("jquery")cada vez que encuentra el $identificador global .

var webpack = require("webpack");

    ...

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

3. Use el cargador de importaciones para configurarthis

Algunos módulos heredados dependen de thisser el windowobjeto. Esto se convierte en un problema cuando el módulo se ejecuta en un contexto CommonJS donde thises igual module.exports. En este caso, puede anular thiscon el cargador de importaciones .

Corre npm i imports-loader --save-devy luego

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

El cargador de importaciones también se puede utilizar para inyectar manualmente variables de todo tipo. Pero la mayoría de las veces ProvidePlugines más útil cuando se trata de globales implícitos.

4. Use el cargador de importaciones para deshabilitar AMD

Hay módulos que admiten diferentes estilos de módulos, como AMD, CommonJS y legacy. Sin embargo, la mayoría de las veces primero verifican definey luego usan algún código peculiar para exportar propiedades. En estos casos, podría ayudar forzar la ruta CommonJS mediante la configuración define = false.

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

5. Utilice el cargador de guiones para importar guiones de forma global

Si no le importan las variables globales y solo quiere que los scripts heredados funcionen, también puede usar el cargador de scripts. Ejecuta el módulo en un contexto global, como si los hubiera incluido a través de la <script>etiqueta.

6. Use noParsepara incluir discos grandes

Cuando no hay una versión AMD / CommonJS del módulo y desea incluir el dist, puede marcar este módulo como noParse. Luego, webpack solo incluirá el módulo sin analizarlo, lo que puede usarse para mejorar el tiempo de compilación. Esto significa que cualquier característica que requiera el AST , como la ProvidePlugin, no funcionará.

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

Para el acceso global a jquery, existen varias opciones. En mi proyecto webpack más reciente, quería acceso global a jquery, así que agregué lo siguiente a mis declaraciones de complementos:

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

Esto significa que se puede acceder a jquery desde el código fuente de JavaScript a través de referencias globales $ y jQuery.

Por supuesto, también debe haber instalado jquery a través de npm:

$ npm i jquery --save

Para un ejemplo práctico de este enfoque, no dude en bifurcar mi aplicación en github

No sé si entiendo muy bien lo que está tratando de hacer, pero tuve que usar los complementos de jQuery que requerían que jQuery estuviera en el contexto global (ventana) y puse lo siguiente en mi entry.js:

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

Solo tengo que requerir donde quiera jqueryplugin.min.jsy window.$se extiende con el complemento como se esperaba.

Conseguí que las cosas funcionaran bien durante la exposición $y jQuerycomo variables globales con Webpack 3.8.1 y lo siguiente.

Instale jQuery como una dependencia del proyecto. Puede omitir la @3.2.1instalación de la última versión o especificar otra versión.

npm install --save jquery@3.2.1

Instalar expose-loadercomo una dependencia de desarrollo si aún no está instalado.

npm install expose-loader --save-dev

Configure Webpack para cargar y exponer jQuery por nosotros.

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

Agregue esto a su matriz de complementos en webpack.config.js

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

entonces requieren jquery normalmente

require('jquery');

Si el dolor persiste al obtener otros scripts para verlo, intente colocarlo explícitamente en el contexto global a través de (en la entrada js)

window.$ = jQuery;

En su archivo webpack.config.js, agregue a continuación:

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

Instale jQuery usando npm:

$ npm i jquery --save

En el archivo app.js, agregue las siguientes líneas:

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

Esto funcionó para mí. :)

Intenté algunas de las respuestas proporcionadas, pero ninguna parecía funcionar. Entonces probé esto:

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

Parece funcionar sin importar qué versión estoy usando

Esto funciona en webpack 3:

en el archivo webpack.config.babel.js:

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

Y usa ProvidePlugin

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

La mejor solución que encontré fue:

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

Básicamente, debe incluir una variable ficticia en typings.d.ts, eliminar cualquier "importación * como $ de 'jquery" de su código y luego agregar manualmente una etiqueta al script jQuery en su html SPA. De esta forma, el paquete web no estará en su camino, y debería poder acceder a la misma variable global jQuery en todos sus scripts.

Esto funciona para mí en webpack.config.js

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

en otro javascript o en HTML agregue:

global.jQuery = require('jquery');

Editar: a veces desea usar el paquete web simplemente como un paquete de módulos para un proyecto web simple, para mantener su propio código organizado. La siguiente solución es para aquellos que solo desean que una biblioteca externa funcione como se espera dentro de sus módulos, sin tener que dedicar mucho tiempo a las configuraciones de paquetes web. (Editado después de -1)

Solución rápida y simple (es6) si todavía tiene dificultades o desea evitar la configuración externa / la configuración adicional del complemento webpack:

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

dentro de un módulo:

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