В этой статье я собираюсь написать на тему модульной системы JavaScript и другую связанную информацию.

требовать и импортировать

В Javascript есть объект под названием «Объект модуля», который управляет модулями, и эти модули имеют свойства «экспорта». «Экспорт» имеет полезную функцию, которая может получить доступ к определенной функции и объекту из внешних файлов. В Node.js мы можем использовать определенные функции и объекты во внешнем файле, написав требование («путь») поверх кода во внешнем файле.

Example 1
const express = require('express');
const app = express();
module.exports = app;
Example 2
module.exports = {
  tomato: ...,
};
Example 3
module.exports = () => {
  ...
};

В ES6 (ES2015) мы можем использовать импорт. Как и require(), модуль определяется с помощью экспорта, а затем считывается с помощью импорта.

import App from './App.js';//import xxx from 'path'

Чтобы писать код по каждой функции в отдельных файлах, эти «module.exports», «export» и «export default» определены в функции и классе. Затем эти функции и классы считываются с помощью «require» и «import» в каждом файле, в котором мы хотим использовать эти функции и классы.

export function xxx () { ... }
export default function xxx () { ... }
export default class xxx { ... }

нпм

npm расшифровывается как Node Package Manager. Это инструмент менеджера пакетов для Node.js, а также для браузера.

Вебпак

Webpack — это сборщик модулей для современных приложений JavaScript. Модуль означает файлы js, файлы css и другие файлы, необходимые для приложения. Webpack — это инструмент для создания приложений путем объединения этих вышеупомянутых файлов. «bundle.js» создается как выходной файл. В html-файле (например, index.html) мы можем использовать файлы, которые были объединены вместе, описав ‹script src="./bundle.js"›‹/script›.

index.html
<script src=”./bundle.js”></script>

Вавилон

Babel — это инструмент, который преобразует ES6 в текущую версию JavaScript, чтобы запускать js-файлы, написанные в стиле ES6, в текущих браузерах. Babel также называют «транспилером».

Ссылка

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import