Шпаргалка по импорту и экспорту ES6

Шпаргалка по импорту и экспорту ES6

От создателя: в предлагаемой статье будут рассмотрены разные методы того, как импортировать и экспортировать файлы в ES6.

До того, как возник ES6, мы употребляли несколько тегов скриптов в одном файле HTML для импорта различных файлов JavaScript, к примеру:

123<script type=»text/javascript» src=»home.js»></script><script type=»text/javascript» src=»profile.js»></script><script type=»text/javascript» src=»user.js»></script>

Итак, если б у нас была переменная с этим же именованием в различных файлах JavaScript, это привело бы к конфликту (Конфли?кт — наиболее острый способ разрешения противоречий в интересах, обычно сопровождающийся негативными эмоциями, выходящий за рамки правил и норм) имен, и ожидаемое вами значение не было бы фактическим значением, которое вы получили.

ES6 поправил эту делему с концепцией модулей. Любой файл JavaScript, который мы пишем в ES6, именуется модулем. Переменные и функции, которые мы объявляем в любом файле, недосягаемы для остальных файлов, пока мы специально не экспортируем их из этого файла и не импортируем в иной файл.

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

Именованный экспорт: в одном файле быть может несколько именованных экспортов.

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

Именованный экспорт в JavaScript

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

JavaScript

1export const temp = «This is some dummy text»;

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

JavaScript

1234const temp1 = «This is some dummy text1»;const temp2 = «This is some dummy text2»; export { temp1, temp2 };

Направьте внимание, что синтаксис экспорта не является синтаксисом объектного литерала. Итак, в ES6 для экспорта чего-либо мы не можем употреблять такие пары ключ-значение:

JavaScript

123// This is invalid syntax of export in ES6 export { key1: value1, key2: value2 }

Чтоб импортировать то, что мы экспортировали как именованный экспорт, мы используем последующий синтаксис:

JavaScript

1import { temp1, temp2 } from ‘./filename’;

Направьте внимание, что при импорте чего-либо из файла нам не надо добавлять расширение .js к названии файла, так как оно считается по умолчанию.

JavaScript

READ
Анимация подчеркивания
12345// import from functions.js file from current directory import { temp1, temp2 } from ‘./functions’; // import from functions.js file from parent of current directoryimport { temp1 } from ‘../functions’;

Вот демонстрация Code Sandbox.

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

JavaScript

12// constants.jsexport const PI = 3.14159;

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

JavaScript

1import { PI } from ‘./constants’;

Вы не сможете употреблять другое имя:

JavaScript

1import { PiValue } from ‘./constants’; // This will throw an error

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

JavaScript

1import { PI as PIValue } from ‘./constants’;

Тут мы переименовали PI в PIValue, потому сейчас мы не можем употреблять имя переменной PI. Заместо этого мы должны употреблять переменную PIValue, чтоб получить экспортированное значение PI. Мы также можем употреблять синтаксис переименования во время экспорта:

JavaScript

1234// constants.jsconst PI = 3.14159;  export { PI as PIValue };

то при импорте мы должны употреблять PIValue:

JavaScript

1import { PIValue } from ‘./constants’;

Чтоб экспортировать что-либо как именованный экспорт, мы должны поначалу его объявить.

JavaScript

1234export ‘hello’; // this will result in errorexport const greeting = ‘hello’; // this will workexport { name: ‘David’ }; // This will result in errorexport const object = { name: ‘David’ }; // This will work

Порядок, в каком мы импортируем несколько именованных экспортов, не важен. Посмотрите на файл validations.js:

JavaScript

123456789101112131415161718192021222324252627// utils/validations.js const isValidEmail = function(email) {  if (/^[^@ ]+@[^@ ]+.[^@ .]{2,}$/.test(email)) {    return «email is valid»;  } else {    return «email is invalid»;  }}; const isValidPhone = function(phone) {  if (/^[(]d{3}[)]sd{3}-d{4}$/.test(phone)) {    return «phone number is valid»;  } else {    return «phone number is invalid»;  }}; function isEmpty(value) {   if (/^s*$/.test(value)) {    return «string is empty or contains only spaces»;  } else {    return «string is not empty and does not contain spaces»;  } } export { isValidEmail, isValidPhone, isEmpty };
READ
WorpdRess спасет от закрытия поисковик по картинкам СС Search

и в index.js мы используем эти функции, как показано ниже:

JavaScript

12345678// index.jsimport { isEmpty, isValidEmail } from «./utils/validations»; console.log(«isEmpty:», isEmpty(«abcd»)); // isEmpty: string is not empty and does not contain spaces console.log(«isValidEmail:», isValidEmail(«abc@11gmail.com»)); // isValidEmail: email is valid console.log(«isValidEmail:», isValidEmail(«ab@c@11gmail.com»)); // isValidEmail: email is invalid

Вот демонстрация Code Sandbox.

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

Экспорт в JavaScript по умолчанию

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

Чтоб объявить экспорт по умолчанию, мы добавляем ключевое слово по умолчанию перед главным словом экспорта последующим образом:

JavaScript

1234//constants.jsconst name = ‘David’;  export default name;

Чтоб импортировать экспорт по умолчанию, мы не добавляем фигурные скобки, как это было в именованном экспорте, к примеру:

JavaScript

1import name from ‘./constants’;

Если у нас есть несколько именованных экспортов и один экспорт по умолчанию, к примеру:

JavaScript

1234567// constants.jsexport const PI = 3.14159; export const AGE = 30; const NAME = «David»; export default NAME;

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

JavaScript

123// NAME is default export and PI and AGE are named exports here import NAME, { PI, AGE } from ‘./constants’;

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

JavaScript

1234// constants.jsconst AGE = 30; export default AGE;

А в другом файле мы можем употреблять другое имя при импорте

JavaScript

123import myAge from ‘./constants’;  console.log(myAge); // 30

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

Еще одна вещь, на которую следует направить внимание при экспорте по умолчанию, состоит в том, что ключевое слово export default не может предшествовать объявлению переменной:

JavaScript

READ
3 способа заменить все вхождения строки в JavaScript
12// constants.jsexport default const AGE = 30; // This is an error and will not work

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

JavaScript

1234// constants.js const AGE = 30;  export default AGE;

Но мы можем экспортировать значение по умолчанию, не объявляя переменную последующим образом:

JavaScript

12345//constants.jsexport default { name: «Billy», age: 40};

а в другом файле мы можем написать вот так:

JavaScript

1234import user from ‘./constants’; console.log(user.name); // Billy console.log(user.age); // 40

Существует очередной метод импорта всех переменных, экспортированных в файл, с внедрением последующего синтаксиса:

JavaScript

1import * as constants from ‘./constants’;

Тут мы импортируем весь имеющийся у нас именованный экспорт и экспорт по умолчанию из constants.js и сохраняем его в переменной constants. Итак, constants сейчас станет объектом.

JavaScript

123456// constants.jsexport const USERNAME = «David»;export default { name: «Billy», age: 40};

А в другом файле мы используем его, как показано ниже:

JavaScript

123456// test.jsimport * as constants from ‘./constants’; console.log(constants.USERNAME); // Davidconsole.log(constants.default); // { name: «Billy», age: 40 }console.log(constants.default.age); // 40

Вот демонстрация Code Sandbox.

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

JavaScript

12345678910// constants.jsconst PI = 3.14159; const AGE = 30;const USERNAME = «David»;const USER = { name: «Billy», age: 40 }; export { PI, AGE, USERNAME, USER as default };

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

JavaScript

1import USER, { PI, AGE, USERNAME } from «./constants»;

Вот демонстрация Code Sandbox.

Заключение

В ES6 данные, объявленные в одном файле, недосягаемы для другого файла, пока они не будут экспортированы из этого файла и импортированы в иной файл.

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

Создатель: Yogesh Chavan

Редакция: Команда webformyself.

Читайте нас в Telegram, VK, Yandex.Дзен

Источник

Оценить статью
Блог о самом интересном.