Export и Import в JavaScript

Share this post on:

Для чего вообще нужно импортировать или экспортировать файлы в JS? Это делается, в первую очередь для удобства, чтобы избежать многократного дублирования кода. К примеру у вас есть функция, которая используется во многих файлах, чтобы вам постоянно не писать эту функцию в каждом файле, можно создать под функцию отдельный файл, и просто подключить его, вызвав данную функцию уже из другого файла.

И так, предположим у вас есть два файла, functions.js и index.js, они лежат в одной папке. Предположим что вам необходимо вызвать функцию из function.js в index.js. Для этого вам нужно сначала эту функцию экспортировать.

В html файле, подключаем эти оба файла с type=»module».

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

1. Импорт и экспорт лишь одной функции

//Файл function.js 
function CLog(txt) {
   console.log(txt);
}

export default CLog; 

Мы экспортировали функцию, и теперь в файле index.js ее надо нам вызвать. Для вызова эту функцию необходимо импортировать, для этого в самом верху файла пропишем этот импорт.

//Файл index.js
import CLog from './function';

CLog('Good Hacking!');

Мы пишем импорт, после чего прописываем имя функции которую мы экспортировали в functions.js. Далее мы указываем откуда мы импортируем from данный файл, в начале пути прописываем ./

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

//Файл function.js 
function CLog(txt) {
   console.log(txt);
}

export default CLog; 

//Файл index.js
import Ahahaha from './function'; //Потому что в function.js только одна функция 

Ahahaha('Good Hacking!');

2. Импорт и экспорт двух и более

//Файл function.js 
function CLog(txt) {
   console.log(txt);
}

const name = "Alex";

export default name;
export default CLog; 

//Файл index.js
import {name, CLog} from './function'; // 

CLog('Good Hacking!');
console.log(name);

Также хочу сказать, что import и export работают только на хостинге, с http запросом.

Вы можете посмотреть исходный код на моем GitHub

Кому была полезна эта информация буду очень благодарен если пожертвуйте на развитие сайта. Спасибо!