Девелоперский веб-сервер обслуживает JavaScript с типом mime text / html

Question

Я пытаюсь добавить работника пользовательского сервиса в приложение React, запущенное с помощью инструмента начальной загрузки CRA (Create React App).Я добавил свой пользовательский сервисный Javascript в папку вывода сборки, и он обслуживается веб-пакетом.Тем не менее, я не могу зарегистрировать его, потому что сервер разработки веб-пакетов каким-то образом обслуживает файл с типом mime "text / html".Я удалил свои скрипты CRA и добавил настраиваемую экспресс-конфигурацию в WebpackDevserver.config.js, чтобы пометить все файлы, заканчивающиеся на «.js», как text / javascript.Я сделал это с помощью ловушки до и после следующим образом:

before(app) {
  app.use(function jsContentTypeMiddleware(req, res, next) {
      if (req.url.endsWith('.js')) {
        res.setHeader('Content-Type', 'text/javascript');
      }
      next();
    });
  // This lets us open files from the runtime error overlay.
  app.use(errorOverlayMiddleware());
  // This service worker file is effectively a 'no-op' that will reset any
  // previous service worker registered for the same host:port combination.
  // We do this in development to avoid hitting the production cache if
  // it used the same host and port.
  // https://github.com/facebookincubator/create-react-app/issues/2272#issuecomment-302832432
  app.use(noopServiceWorkerMiddleware());
},
after(app) {
  app.use(function jsContentTypeMiddleware(req, res, next) {
      if (req.url.endsWith('.js')) {
        res.setHeader('Content-Type', 'text/javascript');
      }
      next();
    });
}

По какой-то причине тип mime все еще принимается в браузере как "text / html" даже после того, как я подтверждаю в отладке серверасеанс, что заголовок правильно устанавливается в хуке before.Сначала я просто использовал ловушку before, но затем я добавил ловушку after, когда увидел, что тип контента все еще принимается в браузере с типом mime text / html.Я не получаю попаданий в точку останова после ловушки, поэтому я не могу подтвердить, что она подключена или запущена.

Есть ли лучший способ сделать это?Я действительно не хочу удалять свое приложение CRA.Я видел это как обычную тему, пока гуглял за советом.По-видимому, есть проект, который может обойти проблему добавления работника нестандартного сервиса без удаления, но я не пробовал.Просматривая исходный код, я не вижу, как он будет работать, так как он не настраивает какие-либо настройки web-сервера.Пожалуйста, сообщите.

Answer 1

Я только что понял, что моя проблема была в том, как найти мой рабочий файл в общедоступном каталоге, а не в выходной папке сборки. (Я пересек провода, потому что я использую папку сборки для развертывания приложения и на своем телевизоре.) На самом деле, webpack никогда не находил мой js-файл работника пользовательского сервиса и вместо этого обслуживал страницу индекса html по умолчанию. Все, что мне нужно было сделать, это найти файл в соответствующем месте, и мне вообще не нужно было его извлекать.