reactjs - 如何在 Webpack 构建过程中将 React 应用程序中的 mockServiceWorker.js 文件复制到我的构建文件夹

Question

我尝试设置Mock Service Worker对于我的 React 项目。我的项目不使用CRA .

我想拦截 GraphQL 请求并模拟它的响应，以使用 Cypress 创建端到端测试。

如何将 mockServiceWorker.js 文件复制到我的构建文件夹(使用 Webpack)，就像其他资源图像和字体等一样？

我使用了命令npx msw init build --save。然后 mockServiceWorker.js 已创建。

但是一旦我运行 npm start 并且我的客户端和服务器被编译，文件 mockServiceWorker.js 就消失了？

此外，我还需要在我们的验收环境的管道中使用 msw，以便也在管道中运行 Cypress end 2 end 测试。

Answer 1

您不一定需要复制工作脚本。在大多数情况下，您使用 MSW 作为开发工具。如果您使用 webpack 来为您的开发包提供服务，您可能会使用 webpack-dev-server来服务那个 bundle 。 Webpack Dev Server 支持 static.directory 选项(以前是 webpack 4 中的 contentBase)，该选项指向项目中应充当开发服务器公共(public)目录的本地目录。这就是您需要 initialize the worker into 的地方.

$ npx msw init ./public --save

如果您确实使用 Webpack Dev Server，请确保将其指向正确的公共(public)目录。执行此操作的方法之一是在您的 webpack.config.js 中:

// webpack.config.js
const path = require('path')

module.exports = {
  devServer: {
    static: {
      directory: path.resolve(__dirname, 'public')
    }
  }
}

Note that if you are already serving static assets, you don't have to add any additional webpack configurations. Simply initialize the worker via npx msw init into the same directory that contains your static assets.

如果您通过其他方式提供 webpack 构建，则可以使用 copy-webpack-plugin将工作脚本从一个位置显式复制到另一个位置。不过，我很确定上面的开发服务器建议正是您所寻求的。