Question

97

Conditional export in ES2015

rated 0 times [ 98] [ 1] / answers: 1 / hits: 32881 / 8 Years ago, tue, september 20, 2016, 12:00:00

Let's say you're developing a polyfill and don't want to shim a class if it already exists in the browser. How can this be done in ES6? The following is not valid because exports is not a statement:

if (typeof Foo === 'undefined') {

  export class Foo { ... }

}

If the condition above evaluates to false, the importing script should get the browser built-in.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

dusty

Add To Favorites

Follow

Total Points: 739

Total Questions: 97

Total Answers: 85

Location: Angola

Member since Wed, Apr 13, 2022

2 Years ago

dusty questions

1 js fetch post works, but php is empty

Mon, Dec 14, 20, 00:00, 4 Years ago

1 Nested function component ReactJS

Mon, Mar 23, 20, 00:00, 4 Years ago

1 React Native - How do we know what child element is contained by parent?

Mon, Mar 16, 20, 00:00, 4 Years ago

1 Postman : How to assert all array elements exist in other array?

Fri, Jul 12, 19, 00:00, 5 Years ago

1 How to fix this error Uncaught DOMException: Failed to execute 'querySelectorAll' on 'Document': 'div.com[min=]' is not a valid selector?

Thu, Jun 13, 19, 00:00, 5 Years ago

View All

answered 8 Years ago mathewb · Accepted Answer

export should be static. For conditional exports CommonJS modules and exports can be used.

It should be handled with ES6 modules this way:

export let Foo;



if (window.Foo === undefined) {

  Foo = class Foo { ... }

} else {

  Foo = window.Foo;

}

For platform-independent solution (this may not be equal to global in transpiled code) window can be replaced with

const root = (() => eval)()('this');

if (root.Foo === undefined) {

...

This exploits binding feature of ES6 modules which was designed this way to handle cyclic dependencies and explained greatly here.

The code above transpiles to

...

var Foo = exports.Foo = void 0;



if (window.Foo === undefined) {

  exports.Foo = Foo = function Foo() {

    _classCallCheck(this, Foo);

  };

} else {

  exports.Foo = Foo = window.Foo;

}

In this case export is not conditional, but Foo value that is bound to this export is conditional.