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

Примечание. В этом решении используется веб-пакет для компиляции всех файлов и создания одного универсального файла для приложения.

  1. У нас есть один каталог, который включает 4 файла.
  2. Файл main-index.js будет иметь ссылку на модульные файлы.

Файл a содержит функцию a() и вызывает функцию b() и c() соответственно.

В конце экспортируйте функцию a() с помощью module.exports, чтобы функция a() была доступна другим файлы.

Точно так же файл b имеет только одну функцию b(), которая печатает console.log().

В файле c есть одна функция c(), которая вызывает другую функцию b().

Давайте посмотрим объяснение каждого утверждения и цели.

В Node есть два важных и основных модуля для управления зависимостями, и мы собираемся использовать оба.

На следующем снимке экрана первое утверждение — это синтаксис, а второе — фактическое использование. Итак, здесь fileC.js импортируется с использованием require.

Теперь в файле C.js мы объявляем функцию c() и экспортируем ее.

Так что же такое module.exports? Всякий раз, когда вы хотите экспортировать какой-либо объект, функцию или классы на корневой уровень, вам поможет module.exports. :)

Теперь webpack скомпилирует все файлы и сгенерирует один файл. В этом файле будет весь код из четырех файлов, и он будет выглядеть так.

В своем HTML укажите ссылку на этот файл, и все готово.

Пошаговое выполнение здесь.

  1. Первая функция main() будет выполняться из индексного файла.

2. Затем внутри файла main-index будет прочитана требуемая ссылка.

3. Затем он перейдет к файлу A и прочитает требуемую ссылку для файла C.

4. Теперь он придет к файлу C и прочитает требуемую ссылку для файла B.

5. Теперь все ссылки собраны, поэтому он придет и выполнит вызов функции.

6. После шага 5 все ссылки собираются из соответствующего файла и готовы к использованию. Как и в шаге 5, переменная callFunction содержит функцию a(). Таким образом, хотя функция a() часть для fileA готова использовать количество раз в этом файле через переменную callFunction.

7. Он последовательно выполнит функции и выведет консоль. окончательный вывод будет выглядеть так.

Это оно! Действительно легко. :)

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