Allow creation of plain javascript bundles that are imported via non module type <script> tags and reference 3rd party libs also available via <script>

[snuup]

Expected Behavior / Situation

It should be possible to declare external libraries such that no import statements are left in the bundle. Currently it is impossible to configure rollup such that those imports are excluded.

This is because the only output format that leads to plain javascript bundles is "es" which means that unresolved externals are assumed to be imported (in the browser) via es module imports. I do not want to use

Actual Behavior / Situation

Given such web app:

- typescript code
- rollup as bundler
- mapboxgl as an external library
- es6 modules

i would like to produce a single bundle.js holding all typescript files but not the mapboxgl js code which is referenced with a separate script tag. I do not want modules in the script tags, because this makes debugging in the browser horrible.

Given this rollup.config:

export default {
    input: './js/app.tsx',
    output: [
        {
            file: 'dist/bundle.js',
            format: 'es'
        },
    ],
    external: ['mapbox-gl'],
    plugins: [
        typescript()
    ],
}

the bundle however starts with a troublesome import statement:

import { Map } from 'mapbox-gl';
... bundle code follows as expected

This import statement is correct, since the output has been set to "es" so rollup assumes I want to use the bundle as an es6 module. I want to use a plain normal js file however without any of the old fashioned workaround-module-trickseries.

Modification Proposal

I think the problem is that my case - which I find fairly natural and common - is not handled: Create a plain javascript bundle.

Maybe there should be another output format like "plain" or "js". It would differ in behavior in that unresolved modules that are declared external are just assumed to be available (resolved) and prevent import statement emission.

As a workaround a regex the import statement away.

[lukastaegert]

The iife format was created for that purpose. Imports are here replaced by global variables that you need to specify via the globals option.

It does not look "plain" because everything is wrapped in a function, but this is necessary when using script tags to avoid polluting the global namespace, which may cause unintended side effects.

[snuup]

iife is a totally different thing. when i use a iife bundle, i cannot access anything in the developer tools in the browser. perfectly useless for me. it is less about how the file looks but how it is usable. it is often reasonable but not at all necessary to use iife. i know which javascript files i load in my application and i have perfect control about any conflicts.

[haydentech]

I've needed this functionality multiple times this year. It's crazy that no bundling tool seems to support this currently. I hope rollup will pick this up.