javascript - ejemplo - innerhtml jquery

Exponga jQuery a un objeto de ventana real con Webpack

Question

Quiero exponer el objeto jQuery al objeto de la ventana global que es accesible dentro de la consola del desarrollador en el navegador. Ahora en mi configuración webpack tengo las siguientes líneas:

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

Estas líneas agregan las definiciones de jQuery a cada archivo en mis módulos de paquete web. Pero cuando construyo el proyecto e intento acceder a jQuery en la consola del desarrollador de esta manera:

window.$;
window.jQuery;

dice que estas propiedades no están definidas ...

¿Hay alguna manera de arreglar esto?

Answer 1

En mi caso funciona

{ test: require.resolve("jquery"), loader: "expose?$!expose?jQuery" } 

Answer 2

Esto siempre funcionó para mí. incluido para la window.$ = window.jQuery = require("jquery"); paquete web 3. window.$ = window.jQuery = require("jquery");

Answer 3

Nada de lo anterior funcionó para mí. (y realmente no me gusta la sintaxis de expose-loader). En lugar,

Agregué a webpack.config.js:

var webpack = require(''webpack'');
module.exports = {
   plugins: [
       new webpack.ProvidePlugin({
           $: ''jquery'',
       })     
   ]
}

Que todos los módulos tienen acceso a través de jQuery a través de $.

Puede exponerlo a la ventana agregando lo siguiente a cualquiera de sus módulos incluidos en webpack:

window.$ = window.jQuery = $

Answer 4

Necesita usar el expose-loader .

npm install expose-loader --save-dev

Puede hacer esto cuando lo requiera:

require("expose?$!jquery");

o puedes hacer esto en tu configuración:

loaders: [
    { test: require.resolve(''jquery''), loader: ''expose?jQuery!expose?$'' }
]

ACTUALIZACIÓN : a partir de webpack 2, debe usar expose-loader en lugar de exponer :

module: {
    rules: [{
        test: require.resolve(''jquery''),
        use: [{
            loader: ''expose-loader'',
            options: ''$''
        }]
    }]
}

Answer 5

Parece que el objeto de la window está expuesto en todos los módulos.

¿Por qué no solo importar / requerir JQuery y poner:

window.$ = window.JQuery = JQuery;

Deberá asegurarse de que esto suceda antes de requerir / importar cualquier módulo que utilice window.JQuery , ya sea en un módulo requerido o en el módulo donde se está utilizando.

Answer 6

ProvidePlugin reemplaza un símbolo en otra fuente a través de la importación respectiva, pero no expone el símbolo en el espacio de nombres global. Un ejemplo clásico son los complementos de jQuery. La mayoría de ellos solo espera que jQuery se defina globalmente. Con ProvidePlugin , se aseguraría de que jQuery sea una dependencia (por ejemplo, cargada antes) y la aparición de jQuery en su código se reemplazaría con el equivalente bruto de webpack de require(''jquery'') .

Si tiene scripts externos que dependen del símbolo para estar en el espacio de nombres global (como digamos un JS alojado externamente, Javascript llama a Selenium o simplemente accede al símbolo en la consola del navegador), en su lugar, desea usar el expose-loader .

En resumen: ProvidePlugin gestiona las dependencias en tiempo de construcción de los símbolos globales, mientras que el expose-loader gestiona las dependencias de tiempo de ejecución de los símbolos globales.

Answer 7

Actualización para Webpack v2

Instale expose-loader como lo describe Matt Derrick:

npm install expose-loader --save-dev

Luego inserte el siguiente fragmento en su webpack.config.js :

module.exports = {
    entry: {
        // ...
    },
    output: {
        // ...
    },
    module: {
        loaders: [
                { test: require.resolve("jquery"), loader: "expose-loader?$!expose-loader?jQuery" }
        ]
    }
};

(de los documentos de expose-loader )