Для сборки множества статичных HTML файлов с подтянутыми данными из базы данных и последующего их использования без интернета можно воспользоваться инструментами, такими как Webpack.
Webpack - это инструмент, который позволяет собирать и упаковывать различные файлы вашего проекта, включая HTML файлы. С помощью Webpack вы можете настроить процесс сборки таким образом, чтобы HTML файлы содержали подтянутые данные из базы данных, а также добавить обработку других ресурсов, таких как CSS и JavaScript файлы.
Вот шаги, которые вы можете выполнить, чтобы реализовать эту задачу:
1. Установите Node.js и NPM, если они еще не установлены на вашем компьютере.
2. Создайте новую директорию для вашего проекта и перейдите в нее через командную строку или терминал.
3. Запустите команду npm init, чтобы инициализировать новый проект. Следуйте инструкциям в командной строке, чтобы создать файл package.json, который будет содержать информацию о вашем проекте.
4. Установите необходимые зависимости, включая Webpack и соответствующие плагины для работы с HTML и базой данных. Введите следующую команду:
npm install webpack webpack-cli html-webpack-plugin mysql --save-dev
5. Создайте файл конфигурации для Webpack, который будет называться webpack.config.js. В этом файле вы можете настроить различные параметры сборки, включая входные и выходные файлы, плагины и модули. Вот пример конфигурации:
const HtmlWebpackPlugin = require('html-webpack-plugin');
const mysql = require('mysql');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: __dirname + '/dist',
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html',
}),
/* Другие плагины */
],
module: {
/* Настройки модулей */
},
/* Другие настройки */
};
6. Создайте файл index.js, который будет являться точкой входа для вашего приложения. В этом файле вы можете подключить базу данных, получить данные и передать их на создание HTML файлов. Вот пример:
const mysql = require('mysql');
const fs = require('fs');
const util = require('util');
const connection = mysql.createConnection({
host: 'localhost',
user: 'user',
password: 'password',
database: 'database',
});
const query = util.promisify(connection.query).bind(connection);
(async function() {
try {
const data = await query('SELECT * FROM your_table');
// Создаем HTML файлы с данными из базы данных
data.forEach(item => {
const html = `
<!DOCTYPE html>
<html>
<head>
<title>${item.title}</title>
</head>
<body>
<h1>${item.title}</h1>
<p>${item.content}</p>
</body>
</html>
`;
fs.writeFileSync(`dist/${item.title}.html`, html);
});
connection.end();
} catch (error) {
console.error(error);
}
})();
7. Создайте файл index.html в папке src, который будет являться шаблоном для генерации всех HTML файлов. В этом файле вы можете указать общий макет страницы и подключить стили и скрипты. Например:
<!DOCTYPE html> <html> <head> <title>My App</title> <link rel="stylesheet" href="styles.css"> <script src="bundle.js"></script> </head> <body> <h1>My App</h1> <div id="app"></div> </body> </html>
8. В package.json добавьте сценарий сборки, который будет вызывать Webpack и запускать генерацию HTML файлов. Например:
{
"scripts": {
"build": "webpack && node index.js"
}
}
9. Запустите команду npm run build в командной строке, чтобы собрать ваши HTML файлы в директорию dist. В этот момент Webpack выполнит необходимые действия: упакует JavaScript файлы, скомпилирует CSS и сгенерирует HTML страницы на основе данных из базы данных.
После завершения сборки вы получите набор HTML файлов в директории dist, которые можно использовать без подключения к базе данных или интернету.