javascript - removeattribute - Administrar la dependencia del complemento jQuery en webpack
title css (11)
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;
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 y el cargador de importaciones. Utilicé 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 normal de AMD, 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?
Conseguí que las cosas funcionaran bien al exponer
$
y
jQuery
como variables globales con Webpack 3.8.1 y lo siguiente.
Instale jQuery como una dependencia del proyecto.
Puede omitir
@3.2.1
para instalar la última versión o especificar otra versión.
npm install --save [email protected]
Instale
expose-loader
como 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''
})
]
}
Editar: a veces desea usar webpack 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;
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'',
})
Esto funciona para mí en el webpack.config.js
new webpack.ProvidePlugin({
$: ''jquery'',
jQuery: ''jquery'',
''window.jQuery'': ''jquery''
}),
en otro javascript o en HTML agregue:
global.jQuery = require(''jquery'');
Ha mezclado diferentes enfoques sobre cómo incluir módulos de proveedores heredados. Así es como lo abordaría:
1. Prefiere CommonJS / AMD no minificado sobre
dist
La mayoría de los módulos vinculan la versión
dist
en el campo
main
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 versión
src
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 versión
dist
funciona bien.
2. Use
ProvidePlugin
para inyectar globales 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 webpack 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
imports-loader
para configurar
this
Algunos módulos heredados dependen de que
this
sea el objeto de
window
.
Esto se convierte en un problema cuando el módulo se ejecuta en un contexto CommonJS donde
this
es igual a
module.exports
.
En este caso, puede anular
this
con el
imports-loader
.
Ejecute
npm i imports-loader --save-dev
y 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,
ProvidePlugin
es más útil cuando se trata de globales implícitos.
4. Use el imports-loader 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 la
define
y luego usan algún código peculiar para exportar propiedades.
En estos casos, podría ayudar forzar la ruta CommonJS estableciendo
define = false
.
module: {
loaders: [
{
test: /[////]node_modules[////]some-module[////]index/.js$/,
loader: "imports-loader?define=>false"
}
]
}
5. Utilice el script-loader de guiones para importar guiones de forma global
Si no le importan las variables globales y solo desea 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 etiqueta
<script>
.
6. Use
noParse
para incluir
noParse
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 función que requiera
AST
, como
ProvidePlugin
, no funcionará.
module: {
noParse: [
/[////]node_modules[////]angular[////]angular/.js$/
]
}
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
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.
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 que
jqueryplugin.min.js
y
window.$
Se extienda con el complemento como se esperaba.
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 github de este enfoque, no dude en bifurcar mi aplicación en github
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í. :)