Как обслуживать API локально с помощью webpack

При разработке веб-приложения, управляемого данными, внешнему интерфейсу может потребоваться извлекать данные из различных API-интерфейсов, предоставляемых серверной частью, которые могут быть не готовы в данный момент. В этом случае нам нужно имитировать ответ и обслуживать его через фиктивный сервер, локальный или удаленный. С Webpack это может быть достигнуто без какого-либо фиктивного сервера. Сервер разработки Webpack позволяет использовать пользовательские обработчики для обслуживания ответа API.

Нам нужно добавить запись devServer в конфигурацию веб-пакета, которая будет выглядеть примерно так:

const data = require("./data.json");
module.exports = {
  mode: "development",
  entry: "./src/index",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "build")
  },
  plugins: [],
  devServer: {
    before: function(app) {
      app.get("/getData", function(req, res) {
        res.json(data);
      });
    },
    open: true,
    port: 3000
  },
  resolve: {
    extensions: [".js"]
  },
  module: {}
};

Есть разные удивительные вещи, которые мы можем делать с помощью devserver (отметьте здесь), здесь мы рассмотрим три из них.

open - запустить браузер после компиляции приложения
port - установить порт для обслуживания приложения
before — Мы можем определить пользовательские пути с конечными точками в этой функции из документации —

Предоставляет возможность выполнять пользовательское ПО промежуточного слоя перед выполнением всех остальных ПО промежуточного слоя внутри сервера. Это можно использовать для определения пользовательских обработчиков.

Таким образом, для данной конфигурации веб-пакета, если содержимое data.json — [{a: 1}, {b: 2}, {c: 3}], тогда ответ для http://localhost:3000/getData будет

[
  { a: 1 },
  { b: 2 },
  { c: 3 }
]

Параметр app функции before можно рассматривать как объект express и использовать в том же контексте, app.get имеет параметры req и res, которые являются объектами request и response для выполненного вызова API.

Чтобыувидеть это в действии, ознакомьтесь с этим проектом на github.

Бонус: я использую этот метод, чтобы обойти CORS в моей локальной установке, следующий код помогает мне:

devServer: {
    before: function(app) {
      app.get('/api', async function(req, res) {
        try {
          const queryURL = req.query.q;
          const resp = await fetch(queryURL);
          const body = await resp.text();
          res.send(body);
        } catch (e) {
          res.status(500);
          res.send(e);
        }
      });
    }
  },

Здесь я получаю удаленный URL-адрес на сервере, а не в браузере, поэтому нет ограничений CORS, а затем обрабатываю ответ на том же сервере, следовательно, исключая CORS.

Я настоятельно рекомендую заглянуть в опции devserver, это может сэкономить вам много сил 😊.

Первоначально опубликовано на https://itsopensource.com.

Как обслуживать API локально с помощью webpack

Похожие вопросы