Сравнение методов require() и import() в JavaScript

Прежде чем остановиться на отдельных характеристиках методов, дадим каждому из них определение.

require()

В контексте Node.js require()  —  это встроенная функция для включения внешних модулей, которые существуют в отдельных файлах. Оператор require() читает файл JavaScript, выполняет его, а затем возвращает экспортированный объект. Он позволяет добавлять встроенные модули NodeJS, те, что разработаны сообществом, а также локальные модули.

var myVar = require('http'); //to use built-in modules  
var myVar2 = require('./myLocaModule'); //to use local modules

import()

Операторы import() и export() используются для ссылки на модуль ES. Другие модули с такими типами файлов, как .json, нельзя импортировать с помощью этих операторов. Их можно использовать только в модулях ES, а спецификатором этого оператора может быть либо относительный путь типа URL, либо имя пакета. Оператор import также нельзя использовать во встроенных скриптах, если только такой скрипт не относится к типу module. Динамический импорт можно применять для скриптов, тип которых не является module.

var myVac = import("module-name");

Сравнение require() и import()

1. require() можно вызвать из любого места

Обычно операторы import() и require() вызываются в начале файла. Но вы можете вызвать require() из любого места кода, в то время как операторы import() могут быть определены только в начале. Определение оператора import() в другом месте приведет к ошибке или автоматическому сдвигу в начало файла.

2. require() может быть вызван условно

Оператор require() можно вызывать условно в отличие от import(). Взгляните на приведенный ниже код:

//require
if(user.id == 1){
   const getBlogTitle = require(‘./blogDetails.js’);
}

//import
if(...) {   
  import ...; // Ошибка, не разрешается!
}  
{   
  import ...; // Ошибка, мы не можем поместить импорт ни в один блок.
}

3. Модули ES можно вызывать динамически

Существует способ динамического вызова импорта, который отличается от условного, но может помочь в решении проблем асинхронной загрузки.

//Динамический импорт
let {hi, bye} = await import('./say.js');  
hi(); // Hello!
bye(); // Bye!

//ИЛИ

let say = await import('./say.js');     
say.hi(); // Hello!     
say.bye(); // Bye!

4. Операторы import() являются асинхронными

Операторы require() вызываются синхронно один за другим, в то время как import() вызываются асинхронно, и, как известно, работают лучше, чем require() в крупномасштабных приложениях.

Читайте также:

• Напишите свой первый микросервис на JavaScript
• TypeScript: основы
• 5 способов уменьшения размера пакетов JavaScript

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

---

Перевод статьи Sumeet Bhalla: Compare require() vs import() in JavaScript