在 Angular 项目中使用 Cheerio答案

【问题标题】：Use Cheerio in an Angular project在 Angular 项目中使用 Cheerio
【发布时间】：2020-02-12 18:02:06
【问题描述】：

我有一个 Angular 网络抓取项目，我正在尝试使用 Cheerio。我已将 Cheerio 包含到我的 angular.json 文件中。当我将 Cheerio 包含到我的 App 组件中时，我收到以下错误消息：

index.js:43 Uncaught ReferenceError: global is not defined
    at Object../node_modules/buffer/index.js (index.js:43)
    at __webpack_require__ (bootstrap:79)
    at Object../node_modules/readable-stream/node_modules/safe-buffer/index.js (index.js:2)
    at __webpack_require__ (bootstrap:79)
    at Object../node_modules/readable-stream/lib/_stream_readable.js (_stream_readable.js:55)
    at __webpack_require__ (bootstrap:79)
    at Object../node_modules/readable-stream/readable-browser.js (readable-browser.js:1)
    at __webpack_require__ (bootstrap:79)
    at Object../node_modules/stream-browserify/index.js (index.js:28)
    at __webpack_require__ (bootstrap:79)

按照@Leandro Matilla 的建议，我通过在index.html 中输入此错误来修复此错误：

if (global === undefined) {
    var global = window;
}

但现在我得到一个不同的错误：

util.js:103 Uncaught ReferenceError: Buffer is not defined
    at Object../node_modules/core-util-is/lib/util.js (util.js:103)
    at __webpack_require__ (bootstrap:79)
    at Object../node_modules/readable-stream/lib/_stream_readable.js (_stream_readable.js:67)
    at __webpack_require__ (bootstrap:79)
    at Object../node_modules/readable-stream/readable-browser.js (readable-browser.js:1)
    at __webpack_require__ (bootstrap:79)
    at Object../node_modules/stream-browserify/index.js (index.js:28)
    at __webpack_require__ (bootstrap:79)
    at Object../node_modules/cheerio/node_modules/parse5/lib/parser/parser_stream.js (parser_stream.js:3)
    at __webpack_require__ (bootstrap:79)

如何修复此错误消息？我在 StackOverflow 上尝试过其他解决方案，但都没有奏效...

【问题讨论】：

"...Cheerio，专为服务器设计的核心 jQuery 实现。"为什么要在 Angular 项目中使用服务器库？
@Phix 因为我正在制作一个网络爬虫，据我所知，jQuery 适用于当前 DOM，未提供数据。
jQuery 是一个帮助处理 DOM 的库，节点中没有 DOM。抓取在服务器上完成。
您收到Buffer 错误，因为浏览器中不存在Buffer。 这个包被设计为在 NodeJS 环境中运行。

标签： javascript node.js angular cheerio

【解决方案1】：

将此添加到您的index.html

<script>
    if (global === undefined) {
        var global = window;
    }
</script>

【讨论】：

这个解决方案修复了第一个错误，但现在我得到了一个不同的错误（参见我编辑的问题）。
使用 npm 或 yarn 安装缓冲包。并将以下内容添加到 polyfills.ts()
global.Buffer = global.Buffer ||需要('buffer').Buffer;
如果答案解决了第一个问题，关闭询问。并制作一个新的
stackoverflow.com/questions/50371593/…

【解决方案2】：

您不必将其添加到 angular.json。这是你应该如何做的。注意：正如@phix 正确指出的那样，cheerio 似乎不适合前端使用。就这一点而言，您尝试对 Cheerio 进行的任何操作都可以单独使用 Angular 更清晰地完成。

首先，使用 npm 或 yarn 安装它。

npm install cheerio

然后，将其添加到您的组件中：

import * as cheerio from 'cheerio';

然后您应该能够使用它，就像在文档中一样：

const $ = cheerio.load('<ul id="fruits">...</ul>');

更多使用示例：https://www.npmjs.com/package/cheerio

编辑：正如 cmets 中所述，cheerio 似乎依赖于服务器端库。您需要切换到 Node 框架才能使用此包。 Cheerio 和 Node 设置指南：https://buttercms.com/blog/web-scraping-with-nodejs-and-cheerio

【讨论】：

此解决方案不起作用。我仍然收到global is not defined。
@Xydez 在他们正确建议使用 Nodejs 的 cmets 中。我会切换到 Node 作为框架。 Selenium 也可以很好地用作刮板，并且可以与 node 或 python 一起使用。使用 iframe 之类的东西在前端运行网络爬虫将是独一无二的，我从未见过这样做过。最好的方法是服务器端，你会发现很多指南可以提供帮助。这是 Node 和 Cheerio 的一个：buttercms.com/blog/web-scraping-with-nodejs-and-cheerio