在 React JS 中使用 Puppeteer 进行 Web 抓取

Question

我正在尝试在我的 React JS 学校项目中使用来自https://github.com/BlakeStevenson/populartimes.js的网络爬虫。我不断收到一条错误消息：../node_modules/populartimes.js/node_modules/puppeteer/lib/WebSocketTransport.js Module not found: Can't resolve 'ws' in ...我做了一些研究，我认为这是 puppeteer 如何与 React JS 交互的问题。无论如何我可以解决这个问题吗？这是我正在使用的与刮板相关的所有代码：import React, { Component } from 'react';import { Map, GoogleApiWrapper, InfoWindow, Marker } from 'google-maps-react';let temp;const populartimes = require('populartimes.js');populartimes('ChIJKznozuF0hlQRbfbe7fJJ1rM').then(out => {temp=out.now.percent});我已经安装了 websocket 和 puppeteer。

Answer 1

问题是您正在尝试在 React.Js 应用程序（在客户端/前端）中使用 Populartimes.js/puppeteer，目前这是不可能的。即使您已将puppeteer 的未打包版本添加到 HTML 源代码中，它们也不会工作。

您需要在服务器（后端）端使用 populartimes.js/puppeteer。因此，如果您的应用程序到目前为止是 React.Js-only：您还需要一个 Node.Js 服务器来运行爬虫程序并通过端点将它们的输出数据提供给您的 React.Js 应用程序（很可能您会选择Express以此目的）。

编辑：要了解有关 Node.Js 后端、Express 和 React.Js 客户端应用程序之间关系的一些想法，我可以在dev.to上推荐本教程。