Estoy tratando de convertir a Vite 3 con Vite Ruby (on Rails) de Webpacker & Webpack. Uno de los principales obstáculos que he notado es que mi sistema es un CMS. Algunos de nuestros clientes más antiguos tienen algún código jQuery directamente dentro de las etiquetas <script> en <head> . No puedo cambiar esto fácilmente, y porque importé jQuery dentro de Vite y lo asigné a la window con algo como:
import jQuery from 'jquery' window.$ = window.jQuery = jQuery sucede de manera diferida con type="module" jquery no se inicializa cuando se ejecuta el código en <head> . Recurrí a cargar jQuery a través de una etiqueta CDN <script> para que se cargue sincrónicamente antes de que se ejecute el código <head> . No es gran cosa.
El problema que he encontrado desde aquí es cuando intento usar el complemento jstree jQuery. Esto se puede importar, pero parece cargar automáticamente la dependencia jQuery de node_modules y luego montarse en eso. Cuando luego intentamos encontrar $(element).jstree , nos referimos a la copia de la window de jQuery y jstree no existe en eso. Puedo arreglar esto import $ from 'jquery' justo antes de importar jstree, pero luego estoy haciendo que el usuario descargue jQuery dos veces.
Lo que me gustaría hacer es tener la versión de window de jQuery siempre que un paquete intente importar 'jQuery' . Probé la configuración external del paquete acumulativo, pero no pareció funcionar. Ganas de darle una oportunidad a cualquier cosa, de verdad. Por ahora, también he recurrido a cargar jstree desde un CDN, pero eso se siente menos limpio.
He probado la siguiente configuración hasta ahora:
import { defineConfig } from 'vite' import RubyPlugin from 'vite-plugin-ruby' export default defineConfig({ plugins: [ RubyPlugin(), ], server: { hmr: { host: 'vitedevserver.test', clientPort: 443 } }, build: { rollupOptions: { external: ['jquery'], output: { globals: { jquery: '$' } } } } })Así que hay un poco que necesitaba entender sobre este tema primero.
Vite usa esbuild para "Pre-empaquetado de dependencia" en el desarrollo. Por lo tanto, es una esbuild que los cambios requieren ('jquery') en una inyección de código completo de la biblioteca jQuery dentro del archivo que lo incluía. Necesitamos usar un complemento en el nivel de esbuild para anular este comportamiento en el caso de jQuery y simplemente apuntar a la copia de jQuery que ya existe en window . Aquí está mi configuración final. También necesitaba instalar el siguiente complemento:
$ yarn add @fal-works/esbuild-plugin-global-externals import { defineConfig } from 'vite' import RubyPlugin from 'vite-plugin-ruby' import { globalExternals } from "@fal-works/esbuild-plugin-global-externals"; export default defineConfig({ plugins: [ RubyPlugin() ], server: { hmr: { host: 'vitedevserver.test', clientPort: 443 } }, optimizeDeps: { esbuildOptions: { plugins: [globalExternals({ jquery: { type: "cjs", varName: "$" } })] } } }) Es importante apuntar a cjs o el global aún no funcionó en el caso de jstree .
Queda por ver si esto será un problema en la compilación de producción que usa @rollup/plugin-commonjs . Supongo que podría necesitar usar un complemento en ese entorno para esto también.