Общий модуль в Vite
Общий модуль импортируют обе страницы, и в разработке он остаётся одним файлом.
Пусть в корне лежат
index.html
и about.html,
а в vite.config.js
поле input
перечисляет обе страницы.
Текст для экрана
вынесем в src/shared.js
и экспортируем строку:
export const text = 'hello'
Главный модуль импортирует константу и подставляет её в элемент на странице:
import { text } from './shared.js'
document.querySelector('#app').textContent = text
Модуль about.js
берёт то же значение
из того же файла:
import { text } from './shared.js'
document.querySelector('#app').textContent = text
Запустим сервер разработки
командой npm
с подкомандой run
и именем dev,
если он ещё не работает.
Откроем главную
и about.html
по своим адресам:
на обеих вкладках
будет слово hello.
Изменим строку
в src/shared.js
и сохраним файл:
текст обновится
на обеих страницах
после перезагрузки вкладок.
В инструментах разработчика
на вкладке сети
запрос к shared.js
относится к одному пути
в проекте,
а не к двум копиям
исходника.
Создайте src/common.js с экспортом строки ready и подключите этот модуль из src/main.js и src/about.js вместо дублирования текста в каждом файле.
Измените строку в src/common.js и убедитесь, что новое слово ready появляется и на главной, и на about.html после обновления вкладок.
