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

ES Modules - это стандарт ECMAScript для работы с модулями. Хотя Node.js уже много лет использует стандарт CommonJS, в браузере никогда не было модульной системы, так как каждое важное решение, такое как модульная система, должно быть сначала стандартизировано с помощью ECMAScript, а затем реализовано.

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

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

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

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

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

ES Modules Support

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

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

import package from 'module-name'

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

const package = require('module-name')

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

верхний регистр.js

export default str => str.toUpperCase()

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

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

На HTML-страницу можно добавить модуль, используя<script>тег со специальнымtype="module"атрибут:

<script type="module" src="index.js"></script>

Примечание: этот импорт модуля ведет себя какdeferзагрузка скрипта. Видетьэффективно загружать 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'

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

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. Это означает, что если вы ссылаетесь на скрипты из других доменов, они должны иметь действительный заголовок CORS, который разрешает межсайтовую загрузку (например,Access-Control-Allow-Origin: *)

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

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

<script type="module" src="module.js"></script>
<script nomodule src="fallback.js"></script>

Вывод

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

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

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

Скачать мою бесплатнуюРуководство для начинающих по JavaScript


Больше руководств по js: