Is there a way to keep top-level import names constant in the output?

[gaearon]

We are looking with @trueadm into using Rollup for React.
My bundle (with a bunch of external dependencies) currently looks like this:

'use strict';

var require$$0 = require('react/lib/React');
var require$$0$1 = require('fbjs/lib/invariant');
var require$$2 = require('fbjs/lib/warning');
var require$$0$2 = require('fbjs/lib/ExecutionEnvironment');
var emptyFunction = require('fbjs/lib/emptyFunction');
var EventListener = require('fbjs/lib/EventListener');
var getUnboundedScrollPosition = require('fbjs/lib/getUnboundedScrollPosition');
var containsNode = require('fbjs/lib/containsNode');
var focusNode = require('fbjs/lib/focusNode');
var emptyObject = require('fbjs/lib/emptyObject');

var invariant$1 = require$$0$1;

// ...

Notice how some top-level imports have nice names (e.g. EventListener) while others were renamed in place (e.g. require$$2). I noticed that renaming only seems to happen if there's a variable down below that “steals” the nice name:

'use strict';

var require$$0 = require('React');

// ...

var React = require$$0;

Would it be possible to make sure that it’s always the other way around: the top-level imports keep their names, and any further references to them are renamed?

This is important for us because our internal require() transform mandates that the variable name matches the import name. So it always has to be var x = require('x'). In this example, the desired output would be:

'use strict';

var React = require('react/lib/React');
var invariant = require('fbjs/lib/invariant');
var warning = require('fbjs/lib/warning');
var ExecutionEnvironment = require('fbjs/lib/ExecutionEnvironment');
var emptyFunction = require('fbjs/lib/emptyFunction');
var EventListener = require('fbjs/lib/EventListener');
var getUnboundedScrollPosition = require('fbjs/lib/getUnboundedScrollPosition');
var containsNode = require('fbjs/lib/containsNode');
var focusNode = require('fbjs/lib/focusNode');
var emptyObject = require('fbjs/lib/emptyObject');

// ...

var require$$0 = React;
// etc

Thanks for consideration!

If you want to give this a try, you can run:

git clone https://github.com/trueadm/react.git
cd react
git checkout rollup
npm i
node scripts/rollup/build.js

and explore build/rollup/ReactDOM-core.js.

[Rich-Harris]

Rollup is always going to reserve the right to rename variables as it sees fit to avoid conflicts, so whatever this plugin does can make no guarantees about the final output — but Rollup will always try to respect the developer's intentions.

Given the codebase that you're working with, I think we can get away with the following: on encountering a variable declarator like var x = require('x'), do this...

import x from 'x';

...rather than this:

import require$$0 from 'x';
// ...
var x = require$$0;

That would be generally beneficial anyway, if a tiny bit trickier than the current naive transformation, so I'm in favour of making that change.

Like I say, not bullet-proof, but maybe good enough to unblock you — what do you reckon?

[gaearon]

I'm not 100% sure I understand the difference but what you describe is likely what I wanted. For now I hacked around it with a Babel plugin: facebook/react@0a50b6a.

[Rich-Harris]

Just released 8.0.0 which addresses this issue to the extent possible. As a bonus, will make for slightly cleaner/more readable bundles, for what it's worth. Shout if it doesn't do what you need.

[gaearon]

I think this worked.
Thank you so much for quick fix.

[marvinhagemeister]

@Rich-Harris @gaearon Huge props to you both! It's amazing when people from major repos help each other out. That's what I love about the js community 👍

[gaearon]

In this case, for now, we’re just selfishly consuming fruits of hard labor 😊. I do hope we’ll get to contributing back if this experiment succeeds and we’ll depend on Rollup more.