Введение в модули ES

• Введение в модули ES
• Синтаксис модулей ES
• Другие варианты импорта/экспорта
• КОРС
• Как насчет браузеров, которые не поддерживают модули?
• Вывод

Введение в модули ES

ES Modules – это стандарт ECMAScript для работы с модулями.

В то время как Node.js В течение многих лет использовался стандарт CommonJS, в браузере никогда не было модульной системы, так как каждое важное решение, такое как модульная система, должно быть сначала стандартизировано ECMAScript, а затем реализовано браузером.

Этот процесс стандартизации завершился с ES6, и браузеры начали внедрять этот стандарт, стараясь, чтобы все было хорошо согласовано, работало одинаково, и теперь модули ES поддерживаются в Chrome, Safari, Edge и Firefox (начиная с версии 60).

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

Синтаксис модулей ES

Синтаксис для импорта модуля следующий:

import package from 'module-name'

в то время как CommonJS использует

const package = require('module-name')

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

Например, этот модуль экспортирует функцию, которая возвращает строку в верхнем регистре:

export default str => str.toUpperCase()

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

Теперь любой другой модуль JavaScript может импортировать функциональность, предлагаемую uppercase.js путем его импорта.

HTML-страница может добавить модуль с помощью тега

Примечание: импорт этого модуля ведет себя как загрузка скрипта отложить . Смотрите эффективно загружайте JavaScript с помощью defer и async

Важно отметить, что любой скрипт, загруженный с type="module" , загружается в строгом режиме .

В этом примере uppercase.js модуль определяет экспорт по умолчанию , поэтому, когда мы импортируем его, мы можем присвоить ему имя, которое мы предпочитаем:

import toUpperCase from './uppercase.js'

и мы можем это использовать:

toUpperCase('test') //'TEST'

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

import toUpperCase from 'https://flavio-es-modules-example.glitch.me/uppercase.js'

Это также допустимый синтаксис импорта:

import { toUpperCase } from '/uppercase.js'
import { toUpperCase } from '../uppercase.js'

Это не:

import { toUpperCase } from 'uppercase.js'
import { toUpperCase } from 'utils/uppercase.js'

Он либо абсолютен, либо имеет ./ или / перед именем.

Другие варианты импорта/экспорта

Мы видели этот пример выше:

export default str => str.toUpperCase()

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

const a = 1
const b = 2
const c = 3

export { a, b, c }

Другой модуль может импортировать все эти экспортные данные с помощью

import * from 'module'

Вы можете импортировать только некоторые из этих экспортов, используя назначение деструктурирования:

import { a } from 'module'
import { a, b } from 'module'

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

import { a, b as two } from 'module'

Вы можете импортировать экспорт по умолчанию и любой экспорт по умолчанию по имени, как в этом обычном импорте React:

import React, { Component } from 'react'

Вы можете увидеть пример модулей ES здесь: https://glitch.com/edit/#!/flavio-es-modules-example?path=index.html

КОРС

Модули извлекаются с помощью CORS . Это означает, что если вы ссылаетесь на сценарии из других доменов, у них должен быть допустимый заголовок CORS, который разрешает загрузку между сайтами (например, Контроль доступа-Разрешить-Происхождение: * )

Как насчет браузеров, которые не поддерживают модули?

Используйте комбинацию тип="модуль" и без модуля :

Вывод

Модули ES являются одной из самых больших функций, представленных в современных браузерах. Они являются частью ES6, но путь к их реализации был долгим.

Теперь мы можем их использовать! Но мы также должны помнить, что наличие большего количества модулей приведет к снижению производительности наших страниц, поскольку это еще один шаг, который браузер должен выполнить во время выполнения.

Webpack, вероятно, по-прежнему будет огромным игроком, даже если модули ES появятся в браузере, но наличие такой функции, непосредственно встроенной в язык, имеет огромное значение для унификации того, как модули работают на стороне клиента и на Node.js также хорошо.

Оригинал: “https://flaviocopes.com/es-modules/”