> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/web/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/web/js/module/es/import.md).

# import

🚧 under construction

* [JS](/web/js.md) ⟩ [module](/web/js/module.md) ⟩ [ES](/web/js/module/es.md) ⟩ import
* [JS](/web/js.md) ⟩ [grammar](/web/js/grammar.md) ⟩ [declaration](/web/js/grammar/declare.md) ⟩ import 

{% hint style="success" %} <mark style="color:yellow;">**(**</mark>[directive](/web/js/grammar/directive.md) <mark style="color:yellow;">**or**</mark> [declaration](/web/js/grammar/declare.md):question:<mark style="color:yellow;">**)**</mark>&#x20;

4 forms of `import` declarations:

* [Named import](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#named_import): `import {a, b} from "module";`
* [Default import](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#default_import): `import A from "module";`
* [Namespace import](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#namespace_import): `import * as B from "module";`
* [Side effect import](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#import_a_module_for_its_side_effects_only): `import "module";`

```javascript
import Tools from './module.js';         // import default
import { f, g } from './module.js'; 
import { f as g } from './module.js';    // rename
```

{% endhint %}

{% tabs %}
{% tab title="🧨 雷區" %}
{% hint style="danger" %}
importing a [**CommonJS**](/web/js/module/commonjs.md) module from npm may cause

⛔ [<mark style="color:red;">**SyntaxError**</mark>](/web/js/err/syntax.md)：[<mark style="color:yellow;">**Named export 'xxx' not found**</mark>](/web/js/err/syntax/named-export-not-found.md):exclamation:
{% endhint %}
{% endtab %}

{% tab title="👥 相關" %}

* [export](/web/js/module/es/export.md)
* [module](/web/js/module.md)
  {% endtab %}

{% tab title="💈範例" %}

* [import ES module](/web/js/module/es/import/import-es-module.md)
  {% endtab %}

{% tab title="📗 參考" %}

* [ ] [JavaScript: The Definitive Guide](/web/master/ref/javascript-the-definitive-guide.md) ⟩&#x20;
  * [ ] 5.7.4 import and export&#x20;
  * [ ] 10.3
    {% endtab %}

{% tab title="📘 手冊" %}

* [import](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import)
  {% endtab %}
  {% endtabs %}