Блог

Главная - Вопросы по программированию - Каким должен быть общий каталог для инициализации msw при использовании webpack-dev-сервера?

Каким должен быть общий каталог для инициализации msw при использовании webpack-dev-сервера?

#webpack #webpack-dev-server #msw

Вопрос:

Я прочитал документацию «Где находится мой» общедоступный » каталог?«.

Общедоступный каталог обычно является корневым каталогом вашего сервера (т. е. ./build, ./public или ./dist). Этот каталог часто привязан к Git, и поэтому он должен быть Фиктивным работником службы.

Я не думаю, что мы должны придерживаться ./dist Git, когда мы используем webpack для компиляции нашего исходного кода в output.path: './dist' каталог. Это меня смущает. Я пытаюсь интегрироваться MSW в браузерную среду.

webpack.config.js :

 const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "./dist"),
    filename: "index_bundle.js",
  },
  mode: "development",
  plugins: [new HtmlWebpackPlugin({ template: "./src/index.html" })],
  devServer: {
    static: {
      directory: path.join(__dirname, "dist"),
    },
    port: 9000,
  },
  module: {
    rules: [
      {
        test: /.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"],
          },
        },
      },
    ],
  },
};

src/index.js :

 window.onload = function () {
  console.log(process.env.NODE_ENV);
  if (process.env.NODE_ENV === "development") {
    const { worker } = require("./mocks/browser");
    worker.start();
  }

  fetch("https://jsonplaceholder.typicode.com/users/1")
    .then((res) => res.json())
    .then((res) => {
      console.log(res);
    });
};

src/index.html :

 <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

</body>

</html>

src/mocks/browser.js :

 import { setupWorker } from "msw";
import { handlers } from "./handlers";

export const worker = setupWorker(...handlers);

src/mocks/handlers.js :

 import { rest } from "msw";

export const handlers = [
  rest.get("https://jsonplaceholder.typicode.com/users/1", (req, res, ctx) => {
    return res(ctx.status(200), ctx.json({ username: "teresa teng" }));
  }),
];

То, что я попробовал ниже двумя способами, оба из них работают, когда я использую npx webpack serve команду для запуска сервера разработки webpack и доступа к своему приложению. Я получил правильный насмешливый ответ.

Сгенерировать mockServiceWorker.js файл в ./src/ каталоге:

 ⚡  npx msw init ./src

Перезаписать package.json с помощью приведенного ниже содержимого

 "msw": {
  "workerDirectory": "src"
}

Создайте ./dist каталог и mockServiceWorker.js файл в ./dist/ каталоге.

 ⚡  npx msw init ./dist

Но, ./dist/ каталог в .gitignore файле, который не будет зафиксирован в Git.

webpack-dev-server не записывает никаких выходных файлов после компиляции. Вместо этого он хранит файлы пакетов в памяти. Это означает ./dist , что до msw того, как CLI создаст его, реального каталога не существует. Кроме того, ./dist файл может быть удален в будущем для повторной компиляции.

Итак, при webpack-dev-server таком использовании каким должен MSW быть инициализированный общедоступный каталог?

Ответ №1:

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

В случае с WDS это devServer.static.directory вариант. Он должен указывать на ваш локальный каталог, созданный вами в качестве общедоступного каталога вашего веб-сайта.

 $ mkdir public
$ msw init ./public
 
 // webpack.config.js
const path = require('path')

module.exports = {
  devServer: {
    static: {
      // Point to the directory you've created.
      directory: path.resolve(__dirname, 'public')
    },
    port: 9000
  }
}

Вы также можете указать на любой другой существующий каталог, в котором вы решите разместить рабочий сценарий.

Убедитесь, что рабочий сценарий обслуживается правильно, перейдя к http://localhost:9000/mockServiceWorker.js файлу сценария и просмотрев его содержимое.

Метки: