Rollup: globals & external

backspaces picture backspaces · Jun 13, 2017 · Viewed 10.8k times · Source

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.

Answer

Rich Harris picture Rich Harris · Jun 13, 2017

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