I have a project that uses jQuery extensively throughout code. Instead of importing $ from the installed package each time, I wanted to define it globally. After input from the GitHub issue and some experimentation, I found a working configuration. Here is what worked for me:
First, install dependencies:
npm install -P jquery
npm install -D @rollup/plugin-inject
Then in vite.config.js, inject a plugin, and optimize dependencies, I'm including only the relevant parts, not the entire file here
import { defineConfig } from 'vite';
import inject from '@rollup/plugin-inject';
export default defineConfig(({ command, mode }) => ({
## build code may appear here
plugins: [
inject({
jQuery: 'jquery',
}),
],
optimizeDeps: {
include: ['jquery'],
},
}));
Finally, in the main file in the root source directory, in my case it's index.js import jQuery and assign it to the shortcut $ on the window object, so it's globally accessible.
import jQuery from 'jquery';
// Use this if you want to expose it into a full window scope
Object.assign(window, { $: jQuery, jQuery });
// Use this if you need to limit the scope to the current file only
globalThis.$ = jQuery;
$(document).on(ready() => {
console.debug('We have jQuery running', $);
});
If you need to limit the scope of the file you are creating, then you need to wrap the file into a self-envoking function. If you have a simple app, then adding format: 'iife', in the output section may do the trick. However, if you are compiling multiple files, like 1 JS and 2 CSS files, you may have to add in the code via a plugin. To achive this, in vite.config.js, add a plugin function and then execute it on build. I'm including only the relevant parts, not the entire file here
import fs from 'fs';
import { defineConfig } from 'vite';
import inject from '@rollup/plugin-inject';
function iife() {
return {
name: 'iife',
async writeBundle (pluginOptions, bundle) {
Object.keys(bundle).forEach((fileName) => {
const file = bundle[fileName];
const filePath = path.resolve(pluginOptions.dir;, fileName);
try {
if (fileName.slice(-3) === '.js' && 'code' in file) {
let data = fs.readFileSync(filePath, { encoding: 'utf8' });
data = `(function(window, document, undefined) {\n${data}\n}(window, document));`;
// Save updated file
fs.writeFileSync(filePath, data, { encoding: 'utf8' })
}
} catch (e) {
console.log(e);
}
})
}
}
}
export default defineConfig(({ command, mode }) => ({
## build code may appear here
plugins: [
inject({
jQuery: 'jquery',
}),
iffe(),
],
optimizeDeps: {
include: ['jquery'],
},
}));
This was configured and tested with Vite version 4.5 & 5.0 and Plugin Inject version 5.0.5, and jQuery version 3.7.1