@adesso-se/vite-plugin-legacy-js-concat

Concatenates legacy, non-module JavaScript files in a specific order. The plugin creates a virtual module to import in your Vite app. This is useful for migrating old Gulp projects to Vite without immediately refactoring the code. A proper refactor is still the best long-term solution.

Consider it if your JavaScript requires:

• Global Scope: Your scripts depend on global variables (window).
• Strict Order: Your files must execute in a specific sequence.
• Simple Bundling: You need to concatenate files without ES module conversion.

Installation

npm install @adesso-se/vite-plugin-legacy-js-concat --save-dev

Example

An old Gulp setup might bundle scripts with dependencies like this:

<!-- build:js scripts/main.js -->
<script src="scripts/config.js"></script>
<script src="scripts/helpers.js"></script>
<script src="scripts/logic.js"></script>
<!-- endbuild -->

To migrate this to Vite, add the plugin to vite.config.js. The order of files must be correct.

vite.config.js:

import { defineConfig } from 'vite';
import { legacyConcat } from '@adesso-se/vite-plugin-legacy-js-concat';

export default defineConfig({
// ...
    plugins: [
        legacyConcat({
            files: [
                'scripts/config.js',
                'scripts/helpers.js',
                'scripts/logic.js'
            ],
        }),
    ],
});

Then, import the virtual bundle in your app's entry point:

app.js:

import 'virtual:legacy-bundle';

Restrictions

• Only works for JS.
• Only works for a single target JS file.
• The build will fail if a file reference is not found.

Migration Tips

Some lessons learning during the migration of a complex legacy app.

Stylesheets can be imported directly in your app.js:

import 'styles/main.scss';

NPM packages that were previously included via <script> tags should be installed, imported as modules, and assigned to the window object if the legacy code needs them globally, e.g.

import * as markerClusterer from '@googlemaps/markerclusterer';
window.markerClusterer = markerClusterer;