# CommonJS

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

{% hint style="success" %}
a <mark style="color:yellow;">**module format**</mark> defined by the <mark style="color:yellow;">**CommonJS group**</mark> to solve JavaScript scope issues by executing each module in its namespace.

```javascript
// import
const M = require('./module.js');        // import whole module as an object
const {a, b} = require('./module.js');   // import part of the module
// export
module.exports = { a, b };    // export individual bindings
module.exports = f;           // export a single object/function.
```

{% endhint %}

{% tabs %}
{% tab title="⭐️ 重點" %}
{% hint style="warning" %} <mark style="color:purple;">**CommonJS**</mark> module system was created for [server-side JavaScript (Node.js)](https://www.makeuseof.com/node-js-server-side-javascript/) and is <mark style="color:red;">**not**</mark>**&#x20;**<mark style="color:yellow;">**supported**</mark>**&#x20;**<mark style="color:orange;">**by default**</mark> in [browser](https://lochiwei.gitbook.io/web/browser "mention")s.
{% endhint %}

{% hint style="warning" %}
[es](https://lochiwei.gitbook.io/web/js/module/es "mention") allows you to have <mark style="color:red;">**both**</mark> [default export](https://lochiwei.gitbook.io/web/js/module/es/export/default) and <mark style="color:yellow;">**named exports**</mark> in one module, <mark style="color:red;">**unlike**</mark> <mark style="color:purple;">**CommonJS**</mark>.
{% endhint %}

{% hint style="info" %}

* loaded **synchronously** and processed in the **order** the JS runtime finds them.
* was invented keeping **server-side** JS in mind.&#x20;
* is **not suitable** (❓) for the **client-side**.
* the **npm** ecosystem is based on the **CommonJS** module system.
  {% endhint %}

{% hint style="warning" %} <mark style="color:purple;">**CommonJS**</mark> <mark style="color:yellow;">**modules**</mark> behave as <mark style="color:yellow;">**singleton**</mark> instances, no matter how many times you <mark style="color:blue;">`require(..)`</mark> the same module, you just get additional references to the <mark style="color:yellow;">**single shared**</mark> module instance.
{% endhint %}

{% hint style="warning" %}
In [node.js](https://lochiwei.gitbook.io/web/js/concept/env/node.js "mention") <mark style="color:blue;">`require("student")`</mark> statements, non-absolute paths (<mark style="color:blue;">`"student"`</mark>) assume a "<mark style="color:yellow;">**.js**</mark>" file extension and search "<mark style="color:yellow;">**node\_modules**</mark>".
{% endhint %}
{% endtab %}

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

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

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

* [ ] Eloquent JS ⟩ [CommonJS](https://eloquentjavascript.net/10_modules.html#h_N33QHgUxbG)&#x20;
* [ ] 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/)
* [ ] [From CommonJS to ES Modules: How to modernize your Node.js app](https://electerious.medium.com/from-commonjs-to-es-modules-how-to-modernize-your-node-js-app-ad8cdd4fb662)
* [ ] [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") > Ch. 8 > [Modules](https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/scope-closures/ch8.md#modules-stateful-access-control)
  {% endtab %}
  {% endtabs %}