Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What qualifies as being a dynamic export in ES6

I hear that dynamic exports/imports are not allowed in es6.

This website Uses the example export default 5 * 7; as if it were a legal, static export. This seems reasonable since it clearly evaluates to the static value of 35, but I'm wondering what exactly qualifies as a static export now.

This Code uses export default Backbone.Router.extend({...}); as if it were a legal, static, export. This seems fishy to me as it seems like a dynamic export to me (exporting the result of a function call).

like image 695
Kevin Wheeler Avatar asked Jan 27 '16 10:01

Kevin Wheeler


People also ask

What is dynamic export?

In a nutshell, dynamic exports involve solar inverters being instructed by a central computer system when they can export power to the mains grid based on network conditions – and how much.

What are the two types of exports in ES6?

16.3 The basics of ES6 modules. There are two kinds of exports: named exports (several per module) and default exports (one per module).

What is the correct way of exporting a component in ES6?

ES6 provides two ways to export a module from a file: named export and default export. With named exports, one can have multiple named exports per file. Then import the specific exports they want surrounded in braces. The name of imported module has to be the same as the name of the exported module.

What is module exports in ES6?

With the help of ES6, we can create modules in JavaScript. In a module, there can be classes, functions, variables, and objects as well. To make all these available in another file, we can use export and import. The export and import are the keywords used for exporting and importing one or more members in a module.


2 Answers

The second example only exports the result of the function call, which is static. The function is only called once, thus the result will always be the same on every import.

An Example to illustrate:

f.js

function f() {
    return 2 * Math.random();
}

export default f(); // Is called, before the export is defined. Result: 1.23543

i1.js

import f from 'f';

console.log(f); // 1.23543

i2.js

import f from 'f';

console.log(f); // 1.23543 as well
like image 59
nils Avatar answered Nov 15 '22 18:11

nils


All exports are static in ES6, that is, their exported name resolves to exactly one variable binding in the exporting module and this can be determined by a single look prior to evaluating of the module code.

A module cannot dynamically add or remove exports through execution of code, the list of exported names is fixed by the declaration.

Whether this variable holds a constant or the result of a function call doesn't matter, neither does whether it holds a primitive value or an object. It doesn't even need to be a constant, the content of the variable may change over time (see an example here).


All imports from import statements are static as well, which means that you can explore the dependency graph without executing any module code.

A dynamic import is done by an explicit call to the module loader. Such loads can depend on the control flow of the module, and may differ from run to run. The code needs to manually handle the asynchrony of the process and potential errors.

like image 41
Bergi Avatar answered Nov 15 '22 20:11

Bergi