# module

[JS](https://lochiwei.gitbook.io/web/js) ⟩ module 

{% hint style="success" %} <mark style="color:purple;">**Modules**</mark> provide structure to bigger programs by separating the code into pieces with clear <mark style="color:yellow;">**interfaces**</mark> and <mark style="color:yellow;">**dependencies**</mark>.&#x20;

* <mark style="color:yellow;">**interface**</mark>： the part that’s visible from other modules.
* <mark style="color:yellow;">**dependencies**</mark>： other modules that it makes use of.
  {% endhint %}

{% tabs %}
{% tab title="⭐️ 重點" %}
{% hint style="warning" %}
in [node.js](https://lochiwei.gitbook.io/web/js/concept/env/node.js "mention"), each <mark style="color:yellow;">**JS file**</mark> is treated as a <mark style="color:purple;">**module**</mark>.&#x20;
{% endhint %}

{% hint style="warning" %}
in a [module](https://lochiwei.gitbook.io/web/js/module "mention") there's <mark style="color:red;">**no**</mark> "[module](https://lochiwei.gitbook.io/web/js/scope/module "mention") <mark style="color:yellow;">**object**</mark>" for these <mark style="color:yellow;">**top-level**</mark> [declare](https://lochiwei.gitbook.io/web/js/grammar/declare "mention")s to be added to as [prop](https://lochiwei.gitbook.io/web/js/val/obj/prop "mention").

( 👉 compare： [is-global-obj-prop](https://lochiwei.gitbook.io/web/js/variable/declare/var/is-global-obj-prop "mention"))
{% endhint %}

{% hint style="info" %}
A "[variable](https://lochiwei.gitbook.io/web/js/variable "mention")" is just a [prop](https://lochiwei.gitbook.io/web/js/val/obj/prop "mention") of the [environment-record](https://lochiwei.gitbook.io/web/js/concept/execution-context/lexical-environment/environment-record "mention") (associated with the <mark style="color:yellow;">**currently executing**</mark> [block](https://lochiwei.gitbook.io/web/js/grammar/statement/other/block "mention") /[func](https://lochiwei.gitbook.io/web/js/val/func "mention") /[module](https://lochiwei.gitbook.io/web/js/module "mention") /[<mark style="color:yellow;">**script**</mark>](https://lochiwei.gitbook.io/web/js/scope/global)).&#x20;
{% endhint %}

{% hint style="info" %}
The relations between modules are called *<mark style="color:yellow;">**dependencies**</mark>*. When a module needs a piece from another module, it is said to depend on that module.
{% endhint %}
{% endtab %}

{% tab title="🔴 主題" %}

* <mark style="color:yellow;">**main features of modules**</mark>
  * [import](https://lochiwei.gitbook.io/web/js/module/es/import "mention") <mark style="color:yellow;">**/**</mark> [export](https://lochiwei.gitbook.io/web/js/module/es/export "mention")
* <mark style="color:yellow;">**other features of modules**</mark>
  * [import.meta](https://lochiwei.gitbook.io/web/js/module/import.meta "mention")
  * [browser](https://lochiwei.gitbook.io/web/js/module/browser "mention")
  * [module](https://lochiwei.gitbook.io/web/js/scope/module "mention")
* <mark style="color:yellow;">**types of modules**</mark>
  * [es](https://lochiwei.gitbook.io/web/js/module/es "mention") <mark style="color:yellow;">**/**</mark> [commonjs](https://lochiwei.gitbook.io/web/js/module/commonjs "mention")
* <mark style="color:yellow;">**other related topics**</mark>
  * [package](https://lochiwei.gitbook.io/web/js/module/package "mention")
  * [module-pattern](https://lochiwei.gitbook.io/web/js/module/module-pattern "mention") - used before introduction of native [es](https://lochiwei.gitbook.io/web/js/module/es "mention").
  * [replit](https://lochiwei.gitbook.io/web/appendix/res/editor/replit "mention") ⟩ [import-.js-file](https://lochiwei.gitbook.io/web/appendix/res/editor/replit/import-.js-file "mention")
    {% endtab %}

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

* [ ] JS.info ⟩ [Modules](https://javascript.info/modules-intro)
* [ ] Eloquent JS ⟩ [Module](https://eloquentjavascript.net/10_modules.html)
  * [ ] [Circular Dependencies](https://eloquentjavascript.net/10_modules.html#i_E/zWqBFdy8)
* [ ] DEV ⟩ [Getting Started with JavaScript Modules](https://dev.to/thecoollearner/getting-started-with-javascript-modules-2mkg)
* [ ] MakeUseOf ⟩ [An Introduction to Module Systems in JavaScript](https://www.makeuseof.com/javascript-module-systems/)
* [ ] [ydkjs-scope-and-closures-v.2](https://lochiwei.gitbook.io/web/master/ref/book/you-dont-know-js-series-v.2/ydkjs-scope-and-closures-v.2 "mention") > Chapter 8: [The Module Pattern](https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/scope-closures/ch8.md#chapter-8-the-module-pattern)
  {% endtab %}

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

* [module](https://lochiwei.gitbook.io/web/js/scope/module "mention")
  {% endtab %}

{% tab title="🐞 除錯" %}

* [vscode](https://lochiwei.gitbook.io/web/appendix/res/editor/vscode "mention") ⟩&#x20;
  * [can not use import statement outside a module](https://youtu.be/y1DGRiUhAyQ) (YouTube)\
    rename file extension to <mark style="color:yellow;">**`.mjs`**</mark>
  * [Unexpected token on "export default const"](https://stackoverflow.com/a/40313059/5409815)

    ```javascript
    // ⛔ SyntaxError: 
    export default const a = { ... }
    //             ^^^^^  <---- Unexpected token 'const'

    // ✅ syntax is OK now!
    const a = { ... };
    export default a;
    ```

{% endtab %}
{% endtabs %}