До ES6 в JavaScript не было нативной системы для импорта модулей.
Были такие инструменты, как CommonJS, но ничего встроенного в языковую спецификацию. Кажется, у любого другого основного языка есть способ сделать это, поэтому тот факт, что JavaScript не имел этого, подтвердил доверие людям, которые думали о JavaScript как «языке игрушек».
В этой статье я собираюсь посмотреть, почему нам нужны модули в JavaScript, и как мы их создаем и используем.
Зачем нам нужны модули?
Без модулей по умолчанию весь код, включенный в наше приложение, либо из стороннего кода, либо на нашем собственном, по умолчанию по умолчанию будет глобальным.
Современные приложения JavaScript могут использовать много тысяч импортированных функций (не только библиотеки, которые вы используете, но и используемые библиотеки и т. Д.). Если все было глобальным, это чертовски загроможденное глобальное пространство имен. Вы всегда боятесь, что каждый раз, когда вы создавали новую функцию, будет столкновение именования. Лучший случай заключается в том, что вы получите ошибку, как только вы определите что -то, что получит имя. Что еще хуже, это молча перезаписано, что приводит к очень очень трудно найти ошибку.
Показатель модуля
В прошлом это было решено на специальной основе, обычно с использованием показателя модуля. Примером этого шаблона будет следующая:
const public = (function () {
var hidden = true;
function private1 () {}
function private2 () {}
return {
private1,
private2,
};
})();
Результатом этого является то, что Private1, Private2 и Hidden являются частными в сфере функции окружения. Они не существуют в глобальном масштабе. Все, что существует в глобальном масштабе, является публичным. ‘ Public ‘ – это переменная, ссылаясь на объект, который имеет свойства, называемые private1 и private2. Это функции, которые мы экспортируем из «модуля».
Хотя это решение сработало, с ним было несколько проблем:
- Необходимость самостоятельного закрытия раздражает, уродливая шаблон
- Поскольку это не «официальный», встроенный в языковой стандарт, сторонний код может не сделать это вообще
- Отсутствие стандарта означает, что разные библиотеки могут реализовать это по -разному, что приводит к путанице.
Чтобы решить эти проблемы, ES6 дал нам модули.
Экспорт по умолчанию
Модуль ES6 – это просто файл JavaScript, который экспортирует определенные выражения, которые затем могут быть импортированы в другом месте вашего кода.
Экспорт может быть по умолчанию или назван. Давайте сначала посмотрим на экспорт по умолчанию.
const secretNumber = 123; export default class User;
Экспорт по умолчанию выполняется с помощью ключевого слова экспорта, за которым следует ключевое слово по умолчанию, за которым следует экспортировать выражение, в данном случае определение класса пользователя.
Экспорт по умолчанию импортируется следующим образом:
import User from './user';
const user = new User('wellpaidgeek@gmail.com');
Здесь пользователь будет определен и экспортирован в одном файле JS, а также импортирован и использован в другом файле JS. Каждый файл JS будет его собственным модулем.
Путь к пользователю при использовании в операторе импорта (‘./user’) должен быть относительным путем к этому файлу из текущего файла, в который вы импортируете.
Примечание с экспортом по умолчанию, то, что мы решили назвать то, что мы импортируем, является совершенно произвольным. Это не должно соответствовать тому, что мы называли, когда мы экспортировали его. Это означает, что вышесказанное можно было бы записать в качестве следующего, и все равно будет работать так же:
import ICanCallThisAnythingAndItIsStillAUserClass from './user';
const user = new ICanCallThisAnythingAndItIsStillAUserClass('wellpaidgeek@gmail.com');
Модуль не должен иметь экспорт по умолчанию, но если это так, он может иметь только один из них. Таким образом, следующее является недействительным:
const func1 = () => {};
const func2 = () => {};
export default func1;
export default func2;
Какие вещи мы можем экспортировать?
Любое выражение. Так что это переменные, функции, классы, литералы. Все следующие являются действительными экспортами по умолчанию:
export default 99;
export default 'foo';
export default 10 + 10;
export default () => { console.log('EXPORTED'); };
const x = 10; export default x;
Названный экспорт
Другой тип экспорта, который мы можем получить, называется названным экспортом. Пример заключается в следующем:
// maths.js
export const pi = 3.142;
export const factorial = x => {
if (x < 2) {
return 1;
}
return x * factorial(x - 1);
};
// main.js
import { pi, factorial } from './maths';
const myNumber = factorial(4) + pi;
«Maths.js» экспортирует два названных экспорта, PI и фактор. ‘ main.js ‘использует их.
В отличие от экспорта по умолчанию, где каждый модуль может иметь только один экспорт по умолчанию, модуль может иметь любое количество именованных экспортов. Другое отличие состоит в том, что названные экспорты должны быть даны имя, и они должны быть импортированы с помощью этого имени. Когда мы импортируем именованные экспорты, имена всех экспортов, которые мы хотим импортировать, должны быть включены в список разделенного запятой, завернутые в кудрявые брекеты.
Как мы даем экспорту имя? Имя экспорта воспринимается как идентификатор, который мы используем для выражения. Это может быть имя функции, переменная/постоянное имя или имя класса. В случае Maths.js используются постоянные имена.
Другие примеры именования:
export class User {} // name: User
export function generatePassword () {} // name: generatePassword
export const apiKey = '123'; // name: apiKey
Смешивание дефолта и названного экспорта
Что если мы хотим, чтобы модуль имел как экспорт по умолчанию, а также назван экспорт? Это легко, и будет работать так:
// user.js
export default class User {}
export function generatePassword () {}
export const generateUniqueUserId = () => {};
// main.js
import User, { generatePassword, generateUniqueUserid } from './user';
Импорт по умолчанию должен сначала прийти, затем запятая, затем список именованных экспортов, которые мы хотим, прилагаемый в кудрявые скобки.
Псевдоним по имени импорт
Возможно, у вас есть недостаток в названном импорте. Что если мы что -то импортируем, и у него есть столкновение с именованием с другим модулем? Не волнуйтесь, умные люди, стоящие за ES6, подумали об этом. Они дали нам возможность подвидеть псевдоним по имени экспорт.
Если бы у нас было два модуля, Module1 и Module2, и у каждого из них был экспорт с названием «Рассчитайте», вот как мы бы по псевдониме, чтобы избежать столкновения именования в модуле, импортируя их:
import { calculate as module1Calculate } from './module1';
import { calculate as module2Calculate } from './module2';
module1Calculate();
module2Calculate();
Использование модулей
В современных браузерах, таких как Chrome, вы можете использовать модули, указав в теге сценария при включении их на HTML -странице. Если бы у вас был модуль, называемый пользователем, и модуль, называемый Main, который импортирован от пользователя, вы бы включили их в свою веб -страницу:
Хотя я знаю, что это возможно, я никогда не делаю этого, в основном, поскольку это еще не полностью поддерживается во всех браузерах. Вместо этого я использую комбинацию WebPack и Babel для составления всех модулей в один пакет для развертывания. Это выходит за рамки этой статьи (она уже достаточно длинна!). Простой способ попробовать это – использовать Создать приложение React Чтобы создать приложение React Barebones React. Затем вы можете создать модули в папке SRC и практиковать импорт из них в app.js.
Понравилось это? Тогда вам понравится мой список рассылки. У меня есть регулярный информационный бюллетень на JavaScript, Tech и Careers. Присоединяйтесь к более чем 5000 человек, которым нравится читать. Зарегистрируйтесь в мой список здесь Анкет
Оригинал: “https://dev.to/wellpaidgeek/javascript-es6-modules-made-simple-2990”