如何使用网络抓取中的变量？答案

【问题标题】：How can I use a variable from web scraping?如何使用网络抓取中的变量？
【发布时间】：2018-11-21 18:33:10
【问题描述】：

我使用以下代码抓取了一个工作门户：

const puppeteer = require('puppeteer')

export default function scrape() {
  ;(async () => {
    const browser = await puppeteer.launch()
    const page = await browser.newPage()
    await page.goto('https://www.example.de/jobs/javascript')

    const position = await page.evaluate(() =>
      Array.from(document.querySelectorAll('h2')).map(
        position => position.innerText
      )
    )

    // const logo = await page.evaluate(() =>
    //   Array.from(document.querySelectorAll('div.job-element__logo img')).map(
    //     logo => logo.src
    //   )
    // )

    console.log(JSON.stringify(position))

    await browser.close()
  })()
}

我在这里粘贴了一个示例 URL，当然我在示例中使用的是真实的。否则我认为代码应该可以工作。

我的问题：

我可以在 const 位置下控制台记录我提取的数据。这样可行！但我现在想在另一个反应组件中重用它。哪个不起作用...

我尝试将其导出为函数并将其导入我的名为 JobCard.js 的组件中。但它会打印一条警告：

无法解析 .../components 中的“./scraper”。

这是我的数据树的截图：My data structure

如果我将 scraper.js 放入组件中，它会说：

./node_modules/puppeteer/lib/WebSocketTransport.js 未找到模块：无法解析“/remote-jobs-app/node_modules/puppeteer/lib”中的“ws”

我只想在另一个组件中重用 const 位置。但我无法完成它。有什么想法吗？

【问题讨论】：

puppeteer 是一个服务器端模块，但一个 React 应用程序在客户端（浏览器）上运行。两种截然不同的东西。您需要设置一个单独的节点服务器，然后在客户端使用fetch() 向它请求数据。您可以使用http 模块来设置最小服务器。
我们不是在谈论电子应用程序吗？这可能有效，但@Chris 是对的，而不是在网页上。甚至没有 chrome 扩展。
感谢您的回复。不，它不是电子应用程序，而是我使用 React.js 构建的网络应用程序。好的，我明白了，然后我将设置一个服务器并按照你们的建议进行操作。感谢您的帮助。

标签： javascript node.js reactjs web-scraping

【解决方案1】：

你不能在 react.js 组件中导入你的 scraper 组件当你 scraping 时，你正在运行 node.js。那不是reactjs 这是服务器端的事情。

当你运行你的 react.js 时，它是一个基于浏览器的东西。我建议您，您抓取数据并将其保存为 jobdata.json 之类的文件，然后将其导入您的组件中然后使用该数据

如果你想要动态结果，你需要一个服务器端代码。所以整体设计就像您抓取数据，将其保存在数据库中。制作一个 api 并使用 react 来显示

【讨论】：