Как использовать импорт и экспорт модулей JavaScript ES6

Я начал изучать React, в первой строчке запутался

import React, { Component } from ‘react’;

Да что такое импорт? поэтому я поискал ключевое слово «импорт» и нашел ниже полезную информацию.

Модули JavaScript ES6

Модуль JavaScript содержит класс или библиотеку функций. ES6 поддерживает встроенные модули.

До ES6 мы использовали RequireJs и CommonJS

Экспорт и импорт

Специальные директивы Export и Import загружают один модуль, функции и переменные в другой модуль.

Директива экспорта делает переменные модуля, функции и классы вне модулей.

Переменный импорт и экспорт

экспортировать переменную myList в файл list.js

// list.js
export const myList = [1, 2, 3, 4];

импортировать переменную в main.js

// main.js
import {myList} from './list.js';

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

Ключевое слово default делает функции или переменные экспортируемыми по умолчанию.

// list.js
export default const myList = [1, 2, 3, 4];

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

// main.js
import myList from './list.js';

Мы даем собственное имя для импорта, используемое по умолчанию

// main.js
import list from './list.js';

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

Uncaught SyntaxError: Duplicate export of 'default'

Функция и класс экспорта

функции экспорта и класс аналогичны переменным

// name.js
export function displayName(name) {
  alert(`Hello, ${name}!`);
}
export class User {
   constructor(name) {
     this.name = name;
   } 
}

импортировать функции и класс очень просто

// main.js
import {displayName, User} from './name.js';
displayName('Balaji');
new User('Balaji');

Вы можете импортировать несколько участников, например {displayName, User}

Единый экспорт внизу

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

// name.js
function displayName(name) {
  alert(`Hello, ${name}!`);
}
class User {
   constructor(name) {
     this.name = name;
   } 
}
export {displayName, User};

экспорт по умолчанию

// name.js
function displayName(name) {
  alert(`Hello, ${name}!`);
}
class User {
   constructor(name) {
     this.name = name;
   } 
}
export {displayName as default, User};

Импорт * импорт всего

Символ * используется для импорта всех элементов файла импорта.

// main.js
import * from './name.js';
displayName('Balaji');
new User('Balaji');

Создание псевдонима

Ключевое слово «as» используется для создания псевдонима. да, мы можем использовать это ключевое слово как для экспорта, так и для импорта.

импорт с псевдонимом

// main.js
import {displayName as Name, User as Member} from './name.js';
Name('Balaji');
new Member('Balaji');

экспорт с псевдонимом

// name.js
function displayName(name) {
  alert(`Hello, ${name}!`);
}
class User {
   constructor(name) {
     this.name = name;
   } 
}
export {displayName as default, User as Members};

импортировать элементы псевдонима экспорта

// main.js
import displayName, {Member} from './name.js';
displayName('Balaji');
new Member('Balaji');

помните displayName функцию, объявленную как экспорт по умолчанию.

Спасибо за чтение!