В JavaScript не было встроенной системы модулей. Вот почему у нас так много разных способов импорта и экспорта модулей.
Давным-давно
Первоначально, когда мы думаем о разделении функциональности, согласно логике, мы имеем разные файлы JS.
например -
теперь предположим, что пользовательские файлы имеют это содержимое
Теперь проблема с этим подходом заключается в том, что все доступно на глобальном уровне.
вы можете проверить в объекте окна инструментов разработчика, что все свойства доступны в глобальном пространстве имен
что приводит к конфликту функций и имя переменной и логики, а также множественным обращениям к серверу для каждого файла.
Обертки
Чтобы противостоять тому, что мы также можем создавать оболочки функций, создайте объект в App.js для глобального хранения некоторых важных значений.
например -
./App.js
переменная Приложение = {}
теперь в user.js вы можете создать оболочку и выполнить ее, присвоив значение приложению, как показано ниже:
Теперь, если вы запустите это и снова проверите объект окна, то объект пользователя не присутствует глобально, но доступен в приложении.
также вы можете видеть, что userWrapper также доступен в объекте окна,
плюсы — мы могли абстрагироваться от глобального пространства имен,
минусы — но существует высокая вероятность конфликта имени функции, если мы импортируем любую библиотеку, которая может иметь то же имя функции, что и userWrapper
ИИФЭ
Чтобы противодействовать тому, что мы можем использовать IIFE (немедленно вызывает выражение функции) для создания анонимных функций, как вы можете видеть в предыдущем примере, мы используем объявление именованной функции только для ее вызова, чтобы обойти это мы можем немедленно вызвать, и теперь мы можем избежать коллизий именованных функций
eg-
Однако мы должны поддерживать порядок тегов скриптов в HTML, так как один файл JS может зависеть от другого, поэтому порядок важен.
Общие J
Теперь, чтобы избежать IIFE, на сцену вышли модули CommonJs.
с помощью которого мы можем предоставить приложению определенные функции наших модулей, избегая, таким образом, конфликтов имен.
Но его можно использовать только с Node, а также он синхронно загружает модули, что плохо для браузера, поскольку получается, что стек вызовов будет заморожен до загрузки модуля.
Компоновщик модулей –
Чтобы получить ту же функциональность, что и commonJs для браузерных модулей, на сцену вышли Webpack, Larvel и Snowpack.
Он проверяет кодовую базу и файлы экспорта и интеллектуально объединяет ваше приложение в один файл bundle.js.
Возьмем, к примеру, сборщик Webpack
do
npm установить веб-пакет
настроить конфигурацию веб-пакета, как показано ниже
см., что наша точка входа в приложение — App.js, а имя выходного файла — bundle.js.
Теперь мы можем включить один файл в наш HTML, удалив все остальные теги скрипта файла, как показано ниже.
обновить начальную конфигурацию в package.json до webpack
и запустите npm run start
Теперь мы можем увидеть файл bundle.js с нашим кодом, проанализированным и приведенным в порядок.
это дает свободу от структуры IIFE, а также теперь нам не нужно заботиться о порядке также включены теги script. Также избегается обертывание глобальных объектов в APP.js.
МОДУЛИ ES -
Изначально в js не было модульной структуры, но многие вещи в js значительно улучшились.
Модули ES появились в последней версии
теперь в отличие от commonJs он дает асинхронный импорт модулей
Модули ES предоставляют ключевые слова import и export для совместного использования логики между файлами.
вместо require и module.export в commonJS
Использование модулей -
Модули ES предоставляют ключевые слова import и export для совместного использования логики между файлами.
Вы можете экспортировать более одной вещи из любого файла js
чтобы использовать эти функции в любом другом приложении, просто импортируйте его, используя ключевое слово import -
например, для использования пользовательских функций в App js мы можем импортировать эти функции, как показано ниже:
Либо вы можете использовать * функциональность для импорта всего
or
// используем деструктуризацию объекта
импортировать {firstuser , sort} из «./user»
есть и другой жаргон, например импорт по умолчанию
например -
./user.js
теперь, чтобы импортировать его, вы можете увидеть ниже синтаксис -
импортировать сортировку, {users} из «./user»
тег скрипта
вы можете просто добавить type = module для вашего основного файла
‹script type="module" src="./user.js" async defer›‹/script›
теперь, чтобы запустить это, вам нужно запустить http-сервер для папки вашего проекта, и все запустится, как и раньше.
Здесь jsPrac - папка моего проекта
