JavaScript i moduły - CommonJS i import/export(ES6)

Wstęp

Podział projektu na mniejsze pliki (modułowość) może przynieść sporo korzyści w związku z jego utrzymaniem oraz reużywalnością kodu w innych projektach, pozwala na to (CommonJS oraz moduły wprowadzone w ES6.

CommonJS jest standardem wykorzystywanym przez node.js natomiast moduł ES (ES6) jest przeznaczony dla przeglądarek

CommonJS

Importowanie zależności (w sposób synchroniczny - powinien znajdować się na początku pliku) odbywa się poprzez wykorzystanie funkcji require() [ analiza -> wrapping -> wykonanie -> pamięć cache]

const package = require('./sciezka/nazwaModulu)

np.

const findDroidFunc = require('./findDroid');

Zanim moduł może zostać zaimportowany musi być najpierw wyeksportowany poprzez tworzenie obiektu module poprzez odwołanie się do właściwości exports

module.exports = nazwaModulu;

np.

// droidFinder.js
function findDroid(droid) {
  console.log(`You: Is this ${droid}?\nObi Wan: This is not the droid you are looking for`)
}

module.exports = findDroid;

// r2d2.js
const findDroidFunc = require('./droidFinder');
findDroidFunc("R2D2")

>> node r2d2.js

>> You: Is this R2D2?
>> Obi Wan: This is not the droid you are looking for

gdzie findDroidFunc jest nazwą funkcji znajdującą się danym pliku - zwana modułem

Moduły mogą być wbudowane (stworzone w pliku) jak i zewnętrzne np udostępnione przy pomocy npm

Eksportowanie i importowanie wielu modułów z jednego pliku

Eksport poprzez blokowanie w klamrowe nawiasy -> obiekt

// droidsFuncs.js
module.exports = {
  findDroid;
  makeDroid
};

Import poprzez odwołanie się do nazwy plików z modułami / rozszerzenia .js najczęściej się nie podaje (tu zawarte dla czytelności)

const droids = require("./droidsFuncs.js")

Wykorzystanie - nazwa modułu + metoda

droids.findDroid("R2D2")

Moduły ES(6)

Eksport jest podobne jak powyżej, ale dochodzi również opcja default

export default DroidSeeker;

export {
  droid,
  darthVader
};

Importowanie zależności odbywa się poprzez wykorzystanie kluczowego słowa import (całość konceptu jest podobna do tego znanego mi z Pythona ;)

Import wszystkich modułów z pojedynczego pliku

import * as myModule from '/modules/my-module.js';

Wywołanie poprzez... (nazwa modułu + metoda)

myModule.findDroid()

Importowanie pojedynczego importu / kolejne należy dodawać po przecinku (destrukturyzacja obiektu)

import {myExport} from '/modules/my-module.js'

Importowanie z nadaniem nowej nazwy (jak w Pythonie ;) / kolejne należy dodawać po przecinku

import {bardzoBardzoDlugaNazwa as krotkaNazwa}
from '/modules/my-module.js';

Można również zastosować importowanie poprzez podanie nazwy bez nawiasów jeśli w innym pliku został zastosowany export default NazwaFunkcji; Wówczas wystarczy zaimportować w sposób następujący -> import NazwaModulu from './nazwaPliku'

Przykładowo

// droid.js
export default DroidSeeker

// stormTrooper.js (nowa nazwa może być inna - taka jaką planujemy zastosować)

import droidSeeker from './droid'

można również stosować taki zabieg stosując default (wówczas importując można nadać dowolną nazwę -> ekportuję tą tablicę - nadaj jej nazwę importując)

// plik export.js

export default = [ ..... ]

// plik import.js (nazwa tablica jest nadana dopiero w pliku gdzie dane są importowane)

import tablica from "./export.js"

Asynchroniczny import

import('/modules/my-module.js')
  .then((module) => {
    // Do something with the module.
  });

Przy pomocy async

(async () => {
  if (somethingIsTrue) {
    // import module for side effects
    await import('/modules/my-module.js');
  }
})();

Import z node modules

Jeśli w ścieżce pliku nie znajduje się kropka, wówczas js będzie szukał danej wtyczki w node modules (po wcześniejszej instalacji modułu, do którego planujemy się odwołać)

import { formatDistanceToNow } from "date-fns"

Inne źródła:

Introduction to CommonJS