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

Дата публикации: 2021-05-24

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

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

<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

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

export const temp = "This is some dummy text";

1	export const temp = "This is some dummy text";

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

const temp1 = "This is some dummy text1";
const temp2 = "This is some dummy text2";

export { temp1, temp2 };

const temp1 = "This is some dummy text1";

const temp2 = "This is some dummy text2";

export { temp1, temp2 };

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

// This is invalid syntax of export in ES6

export { key1: value1, key2: value2 }

// This is invalid syntax of export in ES6

export { key1: value1, key2: value2 }

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

import { temp1, temp2 } from './filename';

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

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

// import from functions.js file from current directory 
import { temp1, temp2 } from './functions';

// import from functions.js file from parent of current directory
import { temp1 } from '../functions';

// import from functions.js file from current directory

import { temp1, temp2 } from './functions';

// import from functions.js file from parent of current directory

import { temp1 } from '../functions';

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

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

// constants.js
export const PI = 3.14159;

1 2	// constants.js export const PI = 3.14159;

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

import { PI } from './constants';

1	import { PI } from './constants';

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

import { PiValue } from './constants'; // This will throw an error

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

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

import { PI as PIValue } from './constants';

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

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

// constants.js
const PI = 3.14159; 

export { PI as PIValue };

// constants.js

const PI = 3.14159;

export { PI as PIValue };

то при импорте мы должны использовать PIValue:

import { PIValue } from './constants';

1	import { PIValue } from './constants';

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

export 'hello'; // this will result in error
export const greeting = 'hello'; // this will work
export { name: 'David' }; // This will result in error
export const object = { name: 'David' }; // This will work

export 'hello'; // this will result in error

export const greeting = 'hello'; // this will work

export { name: 'David' }; // This will result in error

export const object = { name: 'David' }; // This will work

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

// 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}[\\)]\s\d{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 };

// 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}[\$]\s\d{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 };

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

// index.js
import { 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

// index.js

import { 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 по умолчанию

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

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

//constants.js
const name = 'David'; 

export default name;

//constants.js

const name = 'David';

export default name;

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

import name from './constants';

1	import name from './constants';

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

// constants.js
export const PI = 3.14159; 
export const AGE = 30;

const NAME = "David";

export default NAME;

// constants.js

export const PI = 3.14159;

export const AGE = 30;

const NAME = "David";

export default NAME;

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

// NAME is default export and PI and AGE are named exports here

import NAME, { PI, AGE } from './constants';

// NAME is default export and PI and AGE are named exports here

import NAME, { PI, AGE } from './constants';

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

// constants.js
const AGE = 30;

export default AGE;

// constants.js

const AGE = 30;

export default AGE;

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

import myAge from './constants'; 

console.log(myAge); // 30

import myAge from './constants';

console.log(myAge); // 30

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

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

// constants.js
export default const AGE = 30; // This is an error and will not work

1 2	// constants.js export default const AGE = 30; // This is an error and will not work

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

// constants.js 
const AGE = 30; 

export default AGE;

// constants.js

const AGE = 30;

export default AGE;

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

//constants.js
export default {
 name: "Billy",
 age: 40
};

//constants.js

export default {

age: 40

};

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

import user from './constants';

console.log(user.name); // Billy 
console.log(user.age); // 40

import user from './constants';

console.log(user.name); // Billy

console.log(user.age); // 40

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

import * as constants from './constants';

1	import * as constants from './constants';

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

// constants.js
export const USERNAME = "David";
export default {
 name: "Billy",
 age: 40
};

// constants.js

export const USERNAME = "David";

export default {

age: 40

};

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

// test.js
import * as constants from './constants';

console.log(constants.USERNAME); // David
console.log(constants.default); // { name: "Billy", age: 40 }
console.log(constants.default.age); // 40

// test.js

import * as constants from './constants';

console.log(constants.USERNAME); // David

console.log(constants.default); // { name: "Billy", age: 40 }

console.log(constants.default.age); // 40

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

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

// constants.js
const PI = 3.14159; 
const AGE = 30;
const USERNAME = "David";
const USER = {
 name: "Billy",
 age: 40 
};

export { PI, AGE, USERNAME, USER as default };

// constants.js

const PI = 3.14159;

const AGE = 30;

const USERNAME = "David";

const USER = {

age: 40

};

export { PI, AGE, USERNAME, USER as default };

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

import USER, { PI, AGE, USERNAME } from "./constants";

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

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

Заключение

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

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

Автор: Yogesh Chavan

Источник: blog.yogeshchavan.dev

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

Читайте нас в Telegram, VK, Яндекс.Дзен

Метки: JavaScript