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
|
||||
|
||||
Export and import statements that we covered in previous chapters are called "static".
|
||||
|
||||
That's because they are indeed static. The syntax is very strict.
|
||||
Export and import statements that we covered in previous chapters are called "static". The syntax is very simple and strict.
|
||||
|
||||
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?
|
||||
|
||||
## 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
|
||||
let modulePath = prompt("Module path?");
|
||||
```js
|
||||
let modulePath = prompt("Which module to load?");
|
||||
|
||||
import(modulePath)
|
||||
.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.
|
||||
|
||||
For instance, if we have the following `say.js`:
|
||||
For instance, if we have the following module `say.js`:
|
||||
|
||||
```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).
|
||||
|
||||
So, the dynamic import will be like this:
|
||||
...Then, in order to access it, we can use `default` property of the module object:
|
||||
|
||||
```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();
|
||||
```
|
||||
|
@ -96,5 +94,5 @@ Dynamic imports work in regular scripts, they don't require `script type="module
|
|||
```smart
|
||||
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