es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Esbuild en Phoenix + jQuery

13 Jul, 2023 Programación

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)
})
“`

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    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:

    const esbuild = require('esbuild')
const sassPlugin = require('esbuild-plugin-sass')

// Define las variables globales para esbuild
const globals = {
  'jquery': 'window.jQuery',
  '$': 'window.$'
}

// Decide qué modo usar
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'
  }

// Define las 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()],
  globalName: 'myModule',
  globals // Agrega el objeto de variables globales a las opciones
}

if (mode === 'watch') {
  opts = {
    watch: true,
    sourcemap: 'inline',
    ...opts
  }
}

if (mode === 'deploy') {
  opts = {
    minify: true,
    ...opts
  }
}

// Inicia esbuild con las opciones previamente definidas
// Detiene el watcher cuando se cierra STDIN (¡no queremos procesos en segundo plano!)
esbuild.build(opts).then((result) => {
  if (mode === 'watch') {
    process.stdin.pipe(process.stdout)
    process.stdin.on('end', () => { result.stop() })
  }
}).catch((error) => {
  process.exit(1)
})

    En este código, el objeto globals lista las variables globales que se deben definir y sus valores correspondientes. En este caso, establecemos jquery y $ en sus equivalentes de ventana. Luego agregamos este objeto al objeto opts, 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.

Comments are closed.