CODEWITHSUNDEEP
javascriptecmascript-6es6-classes6-modules
Dan Dascalescu
Dan Dascalescu

Reputation: 152027

Conditional export in ES2015

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.

Upvotes: 40

Views: 40537

Answers (4)

Qwerty
Qwerty

Reputation: 31949

You can use inline conditional (ternary) operator.

const IS_DEV = process.env.NODE_ENV === 'development';

export const GET = IS_DEV ? POST : undefined

Upvotes: 3

vijayst
vijayst

Reputation: 21846

The above methods did not work well for me with Webpack. Conditionally bailing out caused Webpack warnings which increased bundle size by 20KB before minification.

Webpack plugins have optimisation which kicks in for production builds. The following code worked for me without increasing the bundle size.

let comp = null;
if (process.env.NODE_ENV) {
  comp = require('./MyDevComp').default;
}

The above conditional require did not increase the bundle size for production builds.

Upvotes: 2

Estus Flask
Estus Flask

Reputation: 222474

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.

Upvotes: 34

loganfsmyth
loganfsmyth

Reputation: 161457

export syntax must be at the top-level scope of a module because you are declaring what exports exist. You are free to conditionally assign them a value though, like

export let Foo = global.Foo;

if (typeof Foo === 'undefined'){
    Foo = class { ... }
}

Upvotes: 13

Related Questions