未捕获的ReferenceError：在cheerio.js：5中未定义require

Question

我正试图在Angular 6应用程序中添加一个“购物”部分。该购物区将包含一个搜索栏，它将搜索Amazon并返回用户想要的商品列表。例如，用户搜索锤子，该列表将包含锤子。  为此，我正在尝试使用Cheerio进行网络抓取。尝试在我的TypeScript文件中声明时：

declare var require: any;
const request = require("request");
const cheerio = require("cheerio");

我的网页出现以下错误：

任何帮助将不胜感激，或者对我要达到的目标的替代解决方案的任何建议将非常有帮助。

Answer 1

如果要在浏览器中运行代码，则不仅要使用打字稿编译器来构建项目，还需要使用更多代码。这是因为浏览器本身不支持对require的调用。不用担心，不要让这吓倒您！通过将所需的代码捆绑到可在浏览器中使用的文件中，有很多成熟的工具可以解决此特定问题。

文档中有一整节关于这些构建工具的内容：https://www.typescriptlang.org/docs/handbook/integrating-with-build-tools.html

Answer 2

TypeScript使用import而不是require。

正确的说法是：import * as cheerio from 'cheerio';。

我还建议从here安装类型Cheerio。

此外，尝试以“角度方式”进行操作。 Angular附带了一堆预打包的工具，包括Request的{​​{1}}，详细了解here。

假设您不想在后端运行任何后端实现，最简单的方式就是使用公共方法提供服务，以允许您将所有内容保留在该文件中，从而保持您的组件代码整洁而“准确”。