How do rollup externals and globals work with esm targets - rollupjs

Question

I have a question for all you Rollup gurus. I’m struggling with externals and globals. If I have a rollup.config.js like this:
const external = ['hyperhtml'];
const globals = {
'hyperhtml': 'hyperHTML'
};
export default [
{
external,
input: 'src/foo-bar.mjs',
plugins: [
],
output: {
file: 'dist/foo-bar.mjs',
format: 'es',
globals,
paths: {
hyperhtml: '../node_modules/hyperhtml/min.js'
},
}
},
];
And the entry (foo-bar.mjs) looks like this:
import { hyper } from '../node_modules/hyperhtml/min.js';
class FooBar extends HTMLElement {
constructor() {
super();
this.attachShadow({mode: 'open'});
}
connectedCallback() {
this.render();
}
disconnectedCallback() {}
render() {
hyper(this.shadowRoot)`
<div>something</div>
`;
}
}
customElements.get('foo-bar.mjs') || customElements.define('foo-bar.mjs', FooBar);
export { FooBar };
I would expect Rollup to replace the import {hyper} from ‘hyperhtml’ statement in the generated bundle with something like const {hyper} = hyperHTML but it doesn’t. Instead the bundle file looks like is the same as the source file. Can someone explain why?

Answer 1

If I remember correctly globals only works on iife modules and by extension umd ones, try with rollup-plugin-virtual (https://github.com/rollup/rollup-plugin-virtual)
export default [
{
input: 'src/foo-bar.mjs',
plugins: [
virtual ({
'node_modules/hyperhtml/min.js': `
export const hyper = someGlobalNamespace.hyperhtml.hyper;
`
})
],
output: {
file: 'dist/foo-bar.mjs',
format: 'es'
}
},
];
Not sure if it will work though...