Rollup: globals & external

Question

I'm trying to rollup my completely es6 module repo which has both local imports/export for the projects, and imports to dependencies that are also either scripts or modules.

I'm also trying to have a dual build which creates legacy iife modules via rollup.

This works fine for just my project, no problems. The difficulty is that I have imports for my dependencies.

Rollup's globals and external options are supposed to help but thus far I haven't succeeded in exposing these and rolling up to an iffe. I get http://backspaces.github.io/asx/libs/three.module.js' is imported by src/Three.js, but could not be resolved – treating it as an external dependency

errors and others. The resulting rollups are not what I want: converting the iife rollup to expect the dependencies to be globals thus removed from the rollup.

I realize this is a pretty general question, but I just want to know how to use these two options to manage my repo so that I have imports to dependencies and can "remove" them in the rollup.

Can anyone clearly explain them and what they do? The rollup wiki is slightly helpful but not complete enough.

Disaccharide

Answer 1

For Rollup to be able to include a dependency, it has to be able to find it. It doesn't have any built-in logic for fetching a remote URL such as http://backspaces.github.io/asx/libs/three.module.js (that could be done as a plugin, but AFAIK that plugin hasn't been written, and I'd probably advise against it anyway).

Instead, you'd be better off importing the module from node_modules like so...

import THREE from 'three';

...and adding node-resolve and commonjs to the config that generates the IIFE.

For the config that generates the non-IIFE build where Three.js is kept external, you would need to use the paths config to point three back to the URL:

// rollup.config.js
export default {
  entry: 'src/main.js', // or whatever
  // ...
  external: ['three'], // so it's not included
  paths: {
    three: http://backspaces.github.io/asx/libs/three.module.js
  }
};

Predetermine

Thanks: one small question: for the iife build, I really want the THREE import to be removed entirely, presuming I use <script> globals for legacy use. How would I do that? Probably with the globals property? – Disaccharide

Oh, just wanted to say Rollup is stunningly wonderful, thank you! – Disaccharide

Thanks! When you say removed entirely, you mean you want THREE to be bundled into your IIFE, or you want to remove the import declaration but keep THREE as a separate <script> tag? If the first, use the node-resolve plugin so that Rollup can find it. If the second, external:['three'], global: { three: 'THREE' } says 'don't bundle Three.js, just grab it from the global namespace, and by the way it's called window.THREE – Predetermine

Yup, thanks. I wanted the latter and messing with import and global seems to work fine. BTW: It was fun to look at the generated bundles. The es one especially .. it had to have the external modules up-top. The iife too .. it had to have the externals as args to the outer function. Never woulda thought of that! Thanks again. – Disaccharide

Update from 2020, I had to put "paths" inside of the "output" property. In order for it to work. – Nicotiana

Emm... what if I am impoting THREE from a specific local path instead of 'three' module. – Exasperation

@JoelDenning There are several plugins for importmaps to alias bare imports to URL... – Blackman