Esbuild en Phoenix + jQuery
Actualmente utilizo esbuild para cargar mis activos estáticos. Lo utilizo con un archivo package.json para mantener mis complementos de javascript. El complemento de jQuery está disponible en mi app.js, pero no en mis node_modules. El módulo de datepicker muestra el error: ‘jQuery no está definido’.
En webpack había un módulo ProvidePlugin que solucionaba esto. ¿Cómo debo hacer esto con esbuild?
app.js
import jquery from "jquery";
window.jQuery = jquery;
window.$ = jquery;
$ = jquery;
import datepicker from “jquery-ui/ui/i18n/datepicker-nl-BE”
—->>>>>> ReferenceError: jQuery no está definido en datepicker-nl-BE.js:13 <<<<<<——–
**dev.exs**
watchers: [
#esbuild: {Esbuild, :install_and_run, [:default, ~w(–sourcemap=inline –watch)]},
node: [“esbuild.js”, “–watch”, cd: Path.expand(“../assets”, DIR)],
node: [“sass-watch.js”,
cd: Path.expand(“../assets”, DIR),
into: IO.stream(:stdio, :line),
stderr_to_stdout: true
]
]
**esbuild.js**
const esbuild = require(‘esbuild’)
const sassPlugin = require(‘esbuild-plugin-sass’)
// Decidir qué modo seguir
let mode = ‘build’
process.argv.slice(2).forEach((arg) => {
if (arg === ‘–watch’) {
mode = ‘watch’
} else if (arg === ‘–deploy’) {
mode = ‘deploy’
}
})
const loader =
{
‘.png’: ‘file’,
‘.ttf’: ‘file’
}
// Definir opciones de esbuild + extras para watch y deploy
let opts = {
entryPoints: [‘js/app.js’],
bundle: true,
logLevel: ‘info’,
target: ‘es2016’,
outdir: ‘../priv/static/assets’,
loader,
plugins: [sassPlugin()]
}
if (mode === ‘watch’) {
opts = {
watch: true,
sourcemap: ‘inline’,
…opts
}
}
if (mode === ‘deploy’) {
opts = {
minify: true,
…opts
}
}
// Iniciar esbuild con las opciones previamente definidas
// Detener el watcher cuando se cierre STDIN (sin procesos zombies, por favor)
esbuild.build(opts).then((result) => {
if (mode === ‘watch’) {
process.stdin.pipe(process.stdout)
process.stdin.on(‘end’, () => { result.stop() })
}
}).catch((error) => {
process.exit(1)
})
“`
davy.ai
Para solucionar el error
'jQuery is not defined'
en esbuild, puedes utilizar la opción global en la configuración de esbuild para definir las variables globales que son accesibles en todos los módulos de tu aplicación, incluido tu complemento de jQuery.Para hacer esto, puedes agregar el siguiente código a tu archivo
esbuild.js
:En este código, el objeto
globals
lista las variables globales que se deben definir y sus valores correspondientes. En este caso, establecemosjquery
y$
en sus equivalentes de ventana. Luego agregamos este objeto al objetoopts
, que se pasa como configuración para esbuild.Con esta configuración en su lugar, esbuild ahora define correctamente la variable global
jQuery
para que funcione tu complemento de datepicker.