मुख्य कंटेंट तक स्किप करें

Import Export

@serverSerrverlesskiy

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

«Hello, World!» на Node.js#

Node.js® — это JavaScript окружение построенное на движке Chrome V8.

Начнем работу с Node.js просто набрав node в консоли:

$ node>

Если он у вас не стоит, то скачайте его и установите на свой компьютер.

Node

А теперь давайте попробуем что-то напечатать:

$ node> console.log('hello from Node.js')// После нажатия Enter вы получите следующее:hello from Node.jsundefined

Export

Не стесняйтесь эспериментировать с Node.js с помощью этого интерфейса: обычно тестируют небольшие фрагменты кода здесь, если не целесообразно помещать их сразу в файл.

Пришло время создать наше приложение Hello Node.js!

Начнем с создания файла index.js. Следующей командой мы создаем папку myProject и входим в нее.

mkdir myProject && cd myProject

Теперь создаем сам файл index.js

touch index.js

Откройте свой редактор кода или скачайте и установите его. Мы рекомендуем VS Code.

Откройте редактор кода и добавьте в него папку созданого нами проекта.

new prroject

Теперь откройте боковое меню нажав этот значок.

new prroject

Cкопируйте в него следующий фрагмент кода:

// index.jsconsole.log('hello from Node.js')

Чтобы запустить этот файл, вы должны снова открыть свой терминал и перейти в каталог, в котором размещён index.js.

В VS Code это можно сделать нажав на эти значки.

new prroject

И выбрать таб TERMINAL

new prroject

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

node index.js

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

new prroject

Модульность приложения#

Export

Пришло время перейти на следующий уровень! Давайте создадим что-то более сложное, разделив наш исходный код на несколько JavaScript-файлов с целью удобочитаемости и поддерживаемости.

Структура проекта#

Создайте следующую структуру каталогов (с пустыми файлами), но пока не создавайте package.json, мы сгенерируем его автоматически на следующем шаге:

├── app|   ├── calc.js|   └── index.js├── index.js└── package.json

Чтобы создать новый файл или папку в VS Code нажмите соответствующую иконку как показано на картинке.

new file

package.json#

Каждый проект Node.js начинается с создания файла package.json. Вы можете думать о нем как о JSON-представлении приложения и его зависимостей. Он содержит имя вашего приложения, автора (вас) и все зависимости, необходимые для запуска приложения. Это карта вашего проекта.

Вы можете интерактивно генерировать файл package.json с помощью команды

npm init

в терминале. После запуска команды вас попросят ввести некоторые данные, например имя вашего приложения, версию, описание и так далее. Не нужно беспокоиться, просто нажимайте Enter, пока не получите сформированный JSON и вопрос is it ok?. Нажмите Enter в последний раз и вуаля: ваш package.json был автоматически сгенерирован и помещен в папку вашего приложения. Если вы откроете этот файл в своей IDE, он будет очень похож на фрагмент кода ниже.

// package.json{  "name": "myproject",  "version": "1.0.0",  "description": "",  "main": "index.js",  "scripts": {    "test": "echo \"Error: no test specified\" && exit 1"  },  "author": "",  "license": "ISC"}

Хорошей практикой является добавление стартового скрипта в ваш пакет package.json. Поэтому добавьте в объект scripts строчку:

"scripts": {  "start": "node index.js", // эту строчку  "test": "echo \"Error: no test specified\" && exit 1"}

Как только вы это сделаете, вы можете запустить приложение с помощью команды npm start.

Импорт#

Теперь давайте вернемся к первому созданному вами файлу под названием index.js. Рекомендуется оставить этот файл очень компактным: только подключение самого приложения (файл index.js из подкаталога /app, созданного ранее). Скопируйте следующий код в свой файл index.js и сохраните:

// index.jsrequire('./app/index')

или сокращеная запись для всех файлов index.js

// index.jsrequire('./app')

Если не указан конкретный файл, то интерпретатор кода ищет файл index.js и заходит в него. Вот так просто мы подключили свой первый файл в проект.

Export

Экспорт#

Теперь пришло время приступить к созданию реального приложения. Откройте файл index.js из папки /app, чтобы создать очень простой пример: добавление массива чисел. В этом случае файл index.js будет содержать только числа, которые мы хотим добавить, а логика, требующая вычислений, должна быть помещена в отдельный модуль в файле calc.js. Вставьте этот код в файл index.js в каталоге /app.

// app/index.jsconst calc = require('./calc')const numbersToAdd = [3, 4, 10, 2]const result = calc.sum(numbersToAdd)
console.log(`The result is: ${result}`)

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

// app/calc.jsconst sum = arr => {  return arr.reduce((a, b) => a + b, 0)}
module.exports.sum = sum // export

В этом файле мы создали функцию sum и экспортировали ее, сделали доступными в других файлах проекта.

Чтобы проверить, всё ли вы сделали правильно, сохраните эти файлы, откройте терминал и введите npm start или node index.js. Если все сделали правильно, то получите ответ: 19. Если что-то пошло не так, внимательно просмотрите лог в консоли и найдите проблему на его основе.

new file

Итого#

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

Проблемы?#

Problem

Пишите в Discord или телеграмм чат, а также подписывайтесь на наши новости

Вопросы:#

Question

Чтобы сделать объекты, функции, классы или переменные 🔔 доступными для внешнего мира, необходимо:

  1. Экспортировать их, а затем импортировать
  2. Импортировать их, а затем экспортировать

Node.js® это:

  1. Язык программирования
  2. JavaScript окружение построенное на движке Chrome V8
  3. Браузер

package.json это:

  1. JavaScript окружение построенное на движке Chrome V8
  2. JSON-представление приложения и его зависимостей
  3. Язык программирования JSON

Для того чтобы понять насколько вы усвоили этот урок пройдите тест в мобильном приложении в нашей школы по этой теме.

Sumerian school

Ссылки:#

  1. MDN web doc. Статья "Модули в ECMAScript 6: будущее уже сейчас"
  2. Статья "ES6 Modules and How to Use Import and Export in JavaScript"
  3. Статья "require против ES6 import / export"

Contributors ✨#

Thanks goes to these wonderful people (emoji key):


Dmitriy K.

📖

Dmitriy Vasilev

💵

Resoner2005

🐛 🎨 🖋

Navernoss

🖋 🐛 🎨

Become a Patron!