JS в комплекте Vite не получает пользовательский триггер jQuery() вне пакета ⇐ Jquery

[Anonymous]

В настоящее время у меня есть установка WordPress, в которой я использую Vite в качестве сборщика SCSS и JavaScript. В моем JavaScript я пытаюсь вызвать .on(), чтобы проверить наличие пользовательского WooCommerce .trigger(), см. следующий код:

Код: Выделить всё

jQuery(document).on('found_variation', function(event, variation) {
console.log(variation);
});

Когда я добавляю этот фрагмент как встроенный скрипт, скрипт по ссылке или скрипт модуля, он работает отлично. Однако когда я добавляю этот код в свой app.js, который входит в состав Vite, он не работает (нет вывода на консоль). Я добавил console.log() перед оператором, чтобы проверить, действительно ли он достигнут, а это так и есть.
Код ниже — это мой vite.config.js< /code>.

Код: Выделить всё

import liveReload from 'vite-plugin-live-reload';
import mkcert from 'vite-plugin-mkcert';
import inject from '@rollup/plugin-inject';
import { defineConfig } from 'vite';
import sassGlobImports from 'vite-plugin-sass-glob-import';

const { resolve } = require('path');
const ospath = require('ospath');

const fs = require('fs');

// https://vitejs.dev/config
export default defineConfig({
plugins: [
sassGlobImports(),
liveReload(__dirname + '/**/*.(php|twig)'),
mkcert(),
inject({ $: 'jquery', jQuery: 'jquery', }),
],

// Basic configuration
root: '',
base: process.env.NODE_ENV === 'development' ? '/content/themes/theme-child/' : '/content/themes/theme-child/dist/',

build: {
// Output directory for the production build
outDir: resolve(__dirname, './dist'),
emptyOutDir: true,

// Emit manifest so PHP can find the hashed files
manifest: true,

// Target for esbuild
target: 'es2018',

// Entrypoints for assets
rollupOptions: {
input: {
app: resolve(__dirname + '/assets/js/app.js'),
app_admin: resolve(__dirname + '/assets/js/app-admin.js'),
print: resolve(__dirname + '/assets/js/print.js'),
},
},
minify: 'terser',
write: true,
sourcemap: 'inline',
},

// Vite server settings
server: {
cors: true,
strictPort: true,
port: 3000,
https: true,
hmr: {
host: 'localhost',
},
},

// Required for in-browser template compilation
// https://v3.vuejs.org/guide/installation.html#with-a-bundler
resolve: {
alias: {
'@img': resolve(__dirname, './assets/img'),
'@icons': resolve(__dirname, './assets/icons'),
'@fonts': resolve(__dirname, './assets/fonts'),
'@node_modules': resolve(__dirname, './node_modules'),
},
},

css: {
devSourcemap: true,
},
});

Почему это не работает? Почему я не могу получить пользовательский .trigger(), отправленный WooCommerce в связанном файле JavaScript?
Надеюсь, кто-нибудь сможет мне помочь, заранее спасибо!

Подробнее здесь: https://stackoverflow.com/questions/785 ... -of-bundle