Conditional export in ES2015
Solution 1
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.
Solution 2
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 { ... }
}
Solution 3
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.
Dan Dascalescu
Bio Co-founded the visa-free startup ship, Blueseed, the Quantified Self Forum (a community for self-trackers), and two web startups using meteor. Former Developer Advocate at Google - Progressive Web Apps (PWA), Accelerated Mobile Pages (AMP), Chrome OS, and AR (Lens). Former localization engineer at Yahoo!. I currently discourage localization in general, for reasons I haven't seen successfully challenged since 2009, with the exception of translating basic computer programming materials as a way to onboard new developers. More about me on on Wikipedia or on my website. My CV is on StackOverflow Careers. Interests Entrepreneurship and disruptive technologies, biotech, 3D printing, brain-computer interfaces, prediction markets. Applying ~20 years of experience in software development and ~5 in the startup world in CTO roles at emergent tech companies.
Updated on February 18, 2020Comments
-
Dan Dascalescu about 4 years
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.