Доступ к CSS и JS с помощью Node.js: методы и примеры

Чтобы получить доступ к файлам CSS и JS с помощью Node.js, вы можете использовать различные методы в зависимости от вашего конкретного варианта использования. Вот несколько подходов, которые вы можете рассмотреть:

  1. Использование Express.js: Express — это популярная платформа веб-приложений для Node.js, которая упрощает процесс создания веб-приложений. Для обслуживания статических файлов CSS и JS с помощью Express вы можете использовать промежуточное программное обеспечение express.static. Вот пример:
const express = require('express');
const app = express();
app.use(express.static('public'));
app.listen(3000, () => {
  console.log('Server started on port 3000');
});

В этом примере файлы CSS и JS в «общедоступной» папке будут доступны по корневому URL-адресу (например, http://localhost:3000/style.css).

  1. Использование встроенного модуля http. Если вы предпочитаете не использовать такую ​​структуру, как Express, вы можете использовать встроенный модуль httpв Node.js для создать базовый сервер. Вот пример:
const http = require('http');
const fs = require('fs');
const path = require('path');
const server = http.createServer((req, res) => {
  const filePath = path.join(__dirname, 'public', req.url);
  const contentType = getContentType(req.url);
  fs.readFile(filePath, (err, content) => {
    if (err) {
      res.writeHead(404);
      res.end('File not found');
    } else {
      res.writeHead(200, { 'Content-Type': contentType });
      res.end(content);
    }
  });
});
server.listen(3000, () => {
  console.log('Server started on port 3000');
});
function getContentType(url) {
  const extname = path.extname(url);
  switch (extname) {
    case '.css':
      return 'text/css';
    case '.js':
      return 'text/javascript';
    default:
      return 'text/plain';
  }
}

В этом примере сервер считывает запрошенный файл из «общедоступной» папки и передает его с соответствующим типом контента.

<!DOCTYPE html>
<html>
<head>
  <title>My Page</title>
  <link rel="stylesheet" href="/style.css">
  <script src="/script.js"></script>
</head>
<body>
  <!-- Your page content here -->
</body>
</html>

В этом примере файл CSS style.cssи файл JS script.jsвключены непосредственно в шаблон HTML.