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.

score 18 · Accepted Answer · answered Jun 13 '17 at 12:32

18

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
  }
};

answered Jun 13 '17 at 12:32

Rich Harris

28,091
3
84
99

Thanks: one small question: for the iife build, I really want the THREE import to be removed entirely, presuming I use – backspaces Jun 13 '17 at 16:18
Oh, just wanted to say Rollup is stunningly wonderful, thank you! – backspaces Jun 13 '17 at 16:19
1

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 ` – Rich Harris Jun 13 '17 at 20:10
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. – backspaces Jun 14 '17 at 15:29
3

Update from 2020, I had to put "paths" inside of the "output" property. In order for it to work. – Joel Denning Jan 29 '20 at 02:59
1

Emm... what if I am impoting THREE from a specific local path instead of 'three' module. – Summer Sun Sep 23 '20 at 07:13
@JoelDenning There are several plugins for importmaps to alias bare imports to URL... – Thomas Di G Apr 17 '23 at 19:50

Rollup: globals & external

1 Answers1