> 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.md).

# module

[JS](/web/js.md) ⟩ 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](/web/js/concept/env/node.js.md), 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](/web/js/module.md) there's <mark style="color:red;">**no**</mark> "[module scope](/web/js/scope/module.md) <mark style="color:yellow;">**object**</mark>" for these <mark style="color:yellow;">**top-level**</mark> [declaration](/web/js/grammar/declare.md)s to be added to as [property](/web/js/val/obj/prop.md).

( 👉 compare： [global var / function is global object property❗️](/web/js/variable/declare/var/is-global-obj-prop.md))
{% endhint %}

{% hint style="info" %}
A "[variable](/web/js/variable.md)" is just a [property](/web/js/val/obj/prop.md) of the [environment record](/web/js/concept/execution-context/lexical-environment/environment-record.md) (associated with the <mark style="color:yellow;">**currently executing**</mark> [block](/web/js/grammar/statement/other/block.md) /[function](/web/js/val/func.md) /[module](/web/js/module.md) /[<mark style="color:yellow;">**script**</mark>](/web/js/scope/global.md)).&#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](/web/js/module/es/import.md) <mark style="color:yellow;">**/**</mark> [export](/web/js/module/es/export.md)
* <mark style="color:yellow;">**other features of modules**</mark>
  * [import.meta](/web/js/module/import.meta.md)
  * [browser-specific features](/web/js/module/browser.md)
  * [module scope](/web/js/scope/module.md)
* <mark style="color:yellow;">**types of modules**</mark>
  * [ES module](/web/js/module/es.md) <mark style="color:yellow;">**/**</mark> [CommonJS](/web/js/module/commonjs.md)
* <mark style="color:yellow;">**other related topics**</mark>
  * [package](/web/js/module/package.md)
  * [module pattern](/web/js/module/module-pattern.md) - used before introduction of native [ES module](/web/js/module/es.md).
  * [replit.com](/web/appendix/res/editor/replit.md) ⟩ [import .js file](/web/appendix/res/editor/replit/import-.js-file.md)
    {% 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 & Closures (v.2)](/web/master/ref/book/you-dont-know-js-series-v.2/ydkjs-scope-and-closures-v.2.md) > 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 scope](/web/js/scope/module.md)
  {% endtab %}

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

* [VSCode](/web/appendix/res/editor/vscode.md) ⟩&#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 %}