Примечания о модулях ES с Chantastic

Модули ES (модули JavaScript, если хотите) помогают нам структурировать, организовать и изолировать код.

Эти примеры Сосредоточьтесь на функциях ES Modules, доступных в среде Node.js. Большинство заявок на JavaScript сегодня (в начале 2021 года) все еще проходят через какую -то форму объединения, прежде чем отправлять в браузер. Функции, которые мы освещаем, должны быть общими для всех инструментов комплекса Node.js (WebPack, Rollup, Esbuild) (последняя LTS).

index.js – основной файл

Вот где выполняются все упражнения
Примеры в readme.md может быть копировать/вставлена в index.js

./modules – Подготовленные файлы модуля

Имена относятся к типу контента внутри
Различные примеры могут использовать эти подготовленные модули для изучения концепции

Задание.mjs – Примеры

./modules/Задание.mjs пустой модуль.

1. Импортировать модуль из файловой системы

Модули импортируются с использованием Импорт Ключевое слово и путь строки к этому модулю. Это в основном сделано при открытии файла. Мы можем импортировать любой модуль, который существует в файловой системе.

Импорт модуля назначения.

// index.js

import "./modules/assignment.mjs"

2. Сделайте свой модуль протекать

Первое, что нужно знать о модулях, это то, что они протекают. Они не идеально инкапсулируют весь код. Глобальный код является глобальным кодом, даже если в модуле. Это может звучать плохо (и это может быть) Но это важная особенность.

Добавить код в глобальном выполнении в модуль назначения.mjs

Глобально выполняющий код может быть console.log ("boooo !!") или задание как Global.Leak .

// modules/assignment.mjs

console.log("sah dude")
global.leak = "oops"

// index.js

import "./modules/assignment.mjs"

console.log(global.leak)

sah dude
oops

3. Динамически импортировать модуль

Импорт Ключевое слово имеет два варианта: статический и динамичный. Вы можете изменить статический импорт на динамический импорт, добавив скобки вокруг строки пути.

import "./modules/assignment.mjs" // static
import("./modules/assignment.mjs") // dynamic

Измените статический импорт на динамический импорт

Динамический Импорт Возвращает Обещание В Так что попробуйте обработать это обещание, используя ждет Анкет

// index.js

await import("./modules/assignment.mjs")

console.log(global.leak)

Используйте .потом () разрешить обещание.

// index.js

import("./modules/assignment.mjs")
.then(
  () => console.log(global.leak)
)

sah dude
oops

4. Добавьте объявление и переменную функции в модуль и экспорт, используя список экспорта

Глобальный код выполняется в Импорт Но переменные и объявления функций нет. Даже если функция или переменная могут существовать в импортированном модуле, к ней нельзя получить доступ за пределами этого модуля.

Добавить переменную и объявление функции в модуль

// modules/assignment.mjs

let fallbackName = "there"

function greet(name = fallbackName) {
  return `Hey, ${name}!`
}

Используйте экспортный список для экспорта приветствия

Мы можем экспортировать все, что определено в нашем модуле, добавив его в отдельную запятую Экспорт список.

// modules/assignment.mjs

let fallbackName = "there"

function greet(name = fallbackName) {
  return `Hey, ${name}!`
}

export { fallbackName, greet }

Все, что экспортируется, также может использовать тот же синтаксис списка, {} , для Импорт Анкет Импорт конкретного импорта из модуля требует от Ключевое слово перед строкой пути.

// index.js

import { greet } from "./modules/assignment.mjs"

console.log(greet())

Hey, there!

Экспорт Список обычно находится в конце файла, чтобы гарантировать, что все экспортировалось или упоминалось, уже существует.

Экспорт и импорт только функцию приветствия с помощью экспортного списка

// modules/assignment.mjs

let fallbackName = "dude"

function greet(name = fallbackName) {
  return `Sah, ${name}`
}

export { greet }

// index.js

import { greet } from "./modules/assignment.mjs"

console.log(greet())

Sah, dude

Приветствую все еще имеет доступ к SwarkbackName , даже не смотря на SwarkbackName не экспортируется.

5. Использовать в отношении псевдонимы (или переименования) импорта и экспорта

Модули могут не делиться синтаксисом объекта с модулями, но они все еще позволяют подселить (или переименовать) переменных и функций, используя как ключевое слово.

// modules/assignment.mjs

export { aGoodLocalName as aBetterExportedName }

Он работает одинаково на обоих Импорт и Экспорт сторона.

// index.js

import {
  aBetterExportedName as anEvenBetterContextualName
} from "./modules/assignment"

Переименовать функцию приветствия в экспорте

При импорте используйте новое имя функции, которую вы экспортировали, а затем переименованы в его обратно в Приветствую в Импорт Анкет

// modules/assignment.mjs

let fallbackName = "dude";

function greet(name = fallbackName) {
  return `Sah, ${name}`
}

export { greet as sahDude }

// index.js

import { sahDude as greet } from "./modules/assignment.mjs"

console.log(greet())

Sah, dude

Оригинал: “https://dev.to/ajcwebdev/notes-on-es-modules-with-chantastic-4chh”