minor
This commit is contained in:
parent
5173faa615
commit
a66f514df7
1 changed files with 14 additions and 16 deletions
|
@ -1,8 +1,6 @@
|
||||||
# Dynamic imports
|
# Dynamic imports
|
||||||
|
|
||||||
Export and import statements that we covered in previous chapters are called "static".
|
Export and import statements that we covered in previous chapters are called "static". The syntax is very simple and strict.
|
||||||
|
|
||||||
That's because they are indeed static. The syntax is very strict.
|
|
||||||
|
|
||||||
First, we can't dynamically generate any parameters of `import`.
|
First, we can't dynamically generate any parameters of `import`.
|
||||||
|
|
||||||
|
@ -24,27 +22,27 @@ if(...) {
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
That's because `import`/`export` aim to provide a backbone for the code structure. That's a good thing, as code structure can be analyzed, modules can be gathered and bundled together, unused exports can be removed ("tree-shaken"). That's possible only because the structure of imports/exports is simple and fixed.
|
That's because `import`/`export` aim to provide a backbone for the code structure. That's a good thing, as code structure can be analyzed, modules can be gathered and bundled into one file by special tools, unused exports can be removed ("tree-shaken"). That's possible only because the structure of imports/exports is simple and fixed.
|
||||||
|
|
||||||
But how can we import a module dynamically, on-demand?
|
But how can we import a module dynamically, on-demand?
|
||||||
|
|
||||||
## The import() function
|
## The import() expression
|
||||||
|
|
||||||
The `import(module)` function can be called from anywhere. It returns a promise that resolves into a module object.
|
The `import(module)` expression loads the module and returns a promise that resolves into a module object that contains all its exports. It can be called from any place in the code.
|
||||||
|
|
||||||
The usage pattern looks like this:
|
We can use it dynamically in any place of the code, for instance:
|
||||||
|
|
||||||
```js run
|
```js
|
||||||
let modulePath = prompt("Module path?");
|
let modulePath = prompt("Which module to load?");
|
||||||
|
|
||||||
import(modulePath)
|
import(modulePath)
|
||||||
.then(obj => <module object>)
|
.then(obj => <module object>)
|
||||||
.catch(err => <loading error, no such module?>)
|
.catch(err => <loading error, e.g. if no such module>)
|
||||||
```
|
```
|
||||||
|
|
||||||
Or, we could use `let module = await import(modulePath)` if inside an async function.
|
Or, we could use `let module = await import(modulePath)` if inside an async function.
|
||||||
|
|
||||||
For instance, if we have the following `say.js`:
|
For instance, if we have the following module `say.js`:
|
||||||
|
|
||||||
```js
|
```js
|
||||||
// 📁 say.js
|
// 📁 say.js
|
||||||
|
@ -75,12 +73,12 @@ export default function() {
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
...Then, in order to access it, we can use `default` property of the module object, as explained in the [previous chapter](info:import-export).
|
...Then, in order to access it, we can use `default` property of the module object:
|
||||||
|
|
||||||
So, the dynamic import will be like this:
|
|
||||||
|
|
||||||
```js
|
```js
|
||||||
let {default: say} = await import('./say.js'); // save .default property in say variable
|
let obj = await import('./say.js');
|
||||||
|
let say = obj.default;
|
||||||
|
// or, in one line: let {default: say} = await import('./say.js');
|
||||||
|
|
||||||
say();
|
say();
|
||||||
```
|
```
|
||||||
|
@ -96,5 +94,5 @@ Dynamic imports work in regular scripts, they don't require `script type="module
|
||||||
```smart
|
```smart
|
||||||
Although `import()` looks like a function call, it's a special syntax that just happens to use parentheses (similar to `super()`).
|
Although `import()` looks like a function call, it's a special syntax that just happens to use parentheses (similar to `super()`).
|
||||||
|
|
||||||
So we can't copy `import` to a variable or use `.call/apply` with it.
|
So we can't copy `import` to a variable or use `.call/apply` with it. That's not a function.
|
||||||
```
|
```
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue