Как импортировать функцию js

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

Директивы экспорт и импорт имеют несколько вариантов вызова.

В предыдущей главе мы видели простое использование, давайте теперь посмотрим больше примеров.

Экспорт до объявления

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

Например, все следующие экспорты допустимы:

// экспорт массива export let months = ['Jan', 'Feb', 'Mar', 'Apr', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; // экспорт константы export const MODULES_BECAME_STANDARD_YEAR = 2015; // экспорт класса export class User < constructor(name) < this.name = name; >>

Не ставится точка с запятой после экспорта класса/функции

Обратите внимание, что export перед классом или функцией не делает их функциональным выражением. Это всё также объявление функции, хотя и экспортируемое.

Большинство руководств по стилю кода в JavaScript не рекомендуют ставить точку с запятой после объявлений функций или классов.

Поэтому в конце export class и export function не нужна точка с запятой:

export function sayHi(user) < alert(`Hello, $!`); > // без ; в конце

Экспорт отдельно от объявления

Также можно написать export отдельно.

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

// �� say.js function sayHi(user) < alert(`Hello, $!`); > function sayBye(user) < alert(`Bye, $!`); > export ; // список экспортируемых переменных

…Или, технически, мы также можем расположить export выше функций.

Импорт *

Обычно мы располагаем список того, что хотим импортировать, в фигурных скобках import <. >, например вот так:

// �� main.js import from './say.js'; sayHi('John'); // Hello, John! sayBye('John'); // Bye, John!

Но если импортировать нужно много чего, мы можем импортировать всё сразу в виде объекта, используя import * as . Например:

// �� main.js import * as say from './say.js'; say.sayHi('John'); say.sayBye('John');

На первый взгляд «импортировать всё» выглядит очень удобно, не надо писать лишнего, зачем нам вообще может понадобиться явно перечислять список того, что нужно импортировать?

Для этого есть несколько причин.

Современные инструменты сборки (webpack и другие) собирают модули вместе и оптимизируют их, ускоряя загрузку и удаляя неиспользуемый код. Предположим, мы добавили в наш проект стороннюю библиотеку say.js с множеством функций:

// �� say.js export function sayHi() < . >export function sayBye() < . >export function becomeSilent()

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

// �� main.js import from './say.js';

Импорт «как»

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

Например, для краткости импортируем sayHi в локальную переменную hi , а sayBye импортируем как bye :

// �� main.js import from './say.js'; hi('John'); // Hello, John! bye('John'); // Bye, John!

Экспортировать «как»

Аналогичный синтаксис существует и для export .

Давайте экспортируем функции, как hi и bye :

// �� say.js . export ;

Теперь hi и bye – официальные имена для внешнего кода, их нужно использовать при импорте:

// �� main.js import * as say from './say.js'; say.hi('John'); // Hello, John! say.bye('John'); // Bye, John!

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

На практике модули встречаются в основном одного из двух типов:

1. Модуль, содержащий библиотеку или набор функций, как say.js выше.
2. Модуль, который объявляет что-то одно, например модуль user.js экспортирует только class User .

По большей части, удобнее второй подход, когда каждая «вещь» находится в своём собственном модуле.

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

Модули предоставляют специальный синтаксис export default («экспорт по умолчанию») для второго подхода.

Ставим export default перед тем, что нужно экспортировать:

// �� user.js export default class User < // просто добавьте "default" constructor(name) < this.name = name; >>

Заметим, в файле может быть не более одного export default .

…И потом импортируем без фигурных скобок:

// �� main.js import User from './user.js'; // не , просто User new User('John');

Импорты без фигурных скобок выглядят красивее. Обычная ошибка начинающих: забывать про фигурные скобки. Запомним: фигурные скобки необходимы в случае именованных экспортов, для export default они не нужны.

Именованный экспорт	Экспорт по умолчанию
export class User	export default class User
import from .	import User from .

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

Так как в файле может быть максимум один export default , то экспортируемая сущность не обязана иметь имя.

Например, всё это – полностью корректные экспорты по умолчанию:

export default class < // у класса нет имени constructor() < . >>

export default function(user) < // у функции нет имени alert(`Hello, $!`); >

Как импортировать функцию js

Для того, чтобы какие-то компоненты модуля (переменные/константы/функции/классы) модуля можно было подключить и использовать в другом модулей, их надо экспортировать. Мы можем экспортировать какждый компонент по отдельности. Для этого перед определением компонента указывается ключевое слово export . Например, пусть у нас будет следующий модуль message.js

// экспорт переменной export let welcome = "Welcome"; // экспорт константы export const hello = "Hello"; // экспорт функции export function sayHello() < console.log("Hello METANIT.COM"); >// экспорт класса export class Messenger < send(text)< console.log("Sending message:", text); >>

Здесь экспортируются переменная welcome , константа hello , функция sayHello() и класс Messenger . Стоит отметить, что нам необзательно экспортировать все компоненты модуля, какие-то компоненты мы можем не экспортировать и использовать только внутри этого модуля.

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

let welcome = «Welcome»; const hello = «Hello»; function sayHello() < console.log("Hello METANIT.COM"); >class Messenger < send(text)< console.log("Sending message:", text); >> export

В данном случае оба способа экспорта будут эквивалентны.

Именной импорт компонентов модуля

Все имортируемые компоненты мы можем подключить по отдельности. Для этого после оператора import в фигурных скобках указываются названия подключаемых компонентов- переменных/констант/функций/функций. Затем после оператора from указывается модуль, из которого идет импорт.

import from "путь_к_модулю";

Например, импортируем в модуле main.js экспортируемые компоненты модуля message.js :

import from "./message.js"; sayHello(); const telegram = new Messenger(); telegram.send(welcome);

Итак, здесь подключаются из модуля message.js переменная welcome , функция sayHello() и класс Messenger . При этом нам необязательно подключать все компоненты модуля. Мы можем подключить только те компоненты, которые нам непосредственно нужны и которые мы собираемся использовать.

В итоге при выполнении страницы в браузере в его консоли мы увидим результат работы компонентов подключенного модуля main.js:

Hello METANIT.COM Sending message: Welcome

Импорт всего модуля

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

import * as псевдоним_модуля from "модуль";

После оператора import идет знак звездочки, который указывает, что надо подключить все экспортируемые компоненты. А после оператора as идет псевдоним модуля, с которым будет сопоставляться подключаемый модуль.

Например, подключим в файле main.js весь модуль message.js

import * as MessageModule from "./message.js"; MessageModule.sayHello(); const telegram = new MessageModule.Messenger(); telegram.send(MessageModule.welcome);

В даном случае подключаемый модуль message.js сопоставляется с идентификатором MessageModule . В качестве псевдонима модуля может выстуать произвольное название. И далее мы можем обращаться ко всем экспортируемым компонентам модуля через псевдним модуля, например, обращении к функции sayHello: MessageModule.sayHello()

Как импортировать функцию js

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

export default function sayHello()

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

Теперь импортируем эту функцию в модуле main.js :

import sayHello from "./message.js"; sayHello();

Для импорта компонента по умолчанию достаточно после оператора import прописать имя этого компонента.

Совметный экспорт/импорт отдельных компонентов и компонентов по умолчанию

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

export let welcome = "Welcome"; export const hello = "Hello"; export default function sayHello() < console.log("Hello METANIT.COM"); >export class Messenger < send(text)< console.log("Sending message:", text); >>

Здесь экспортируются все компоненты, однако только функция sayHello экспортируется по умолчанию. Это определение модуля также эквивалентно следующему определению, где компоненты экспортируются через список:

let welcome = «Welcome»; const hello = «Hello»; function sayHello() < console.log("Hello METANIT.COM"); >class Messenger < send(text)< console.log("Sending message:", text); >> export

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

import sayHello, from "./message.js"; sayHello(); const telegram = new Messenger(); telegram.send(welcome);

Экспорт и импорт по умолчанию всего модуля

Стоит учитывать, что при экспорте по умолчанию мы можем только один раз использовать оператор default . Мы не можем по отдельности экспортировать по умолчанию сразу два компонента. Однако мы можем экспортировать по умолчанию сразу набор компонентов как единое целое. Например, определим следующий модуль message.js :

let welcome = «Welcome»; const hello = «Hello»; function sayHello() < console.log("Hello METANIT.COM"); >class Messenger < send(text)< console.log("Sending message:", text); >> export default

Теперь импортируем функционал модуля message.js в модуле main.js :

import MessageModule from "./message.js"; MessageModule.sayHello(); const telegram = new MessageModule.Messenger(); telegram.send(MessageModule.welcome);

В данном случае весь экспортированный список компонентов будет сопоставляться с названием MessageModule , которое фактически будет представлять модуль. И далее через этот идентификатор можно обратиться к конкреному компоненту, используя имя компонента: MessageModule.sayHello();

как импортировать функцию js

Допустим, у нас есть файл myLib.js, который содержит ряд функций и переменных. Чтобы импортировать что-то из этой библиотеки, мы должны убедиться, что эта функция или переменная экспортируется с помощью ключевого слова export . Теперь, в рабочем файле с кодом, мы импортируем функцию myFn и готовы использовать ее:

import myFn from 'myLib.js'; 

Чтобы импортировать все, что есть в файле-библиотеке, можно воспользоваться таким синтаксисом:

import * as myLib from 'myLib.js'; 

И обращаться к переменной или функции из файла через myLib :

myLib.sayHi(); // Используем функцию 'sayHi' из нашей библиотеки