如何将 Typescript/Javascript 函数附加到 Puppeteer 页面上下文

Question

我正在使用 Puppeteer 在 Typescript 中编写一个网络抓取应用程序。我将一个带有实用函数的 Javascript 文件“附加”到页面实例，以使抓取更容易（这是使用 Pupeteer 的函数完成的，请参阅此处的page.addScriptTagAPI ）。页面上的实用程序功能之一可能如下所示：

// functions.ts

export const getLink = (node: Element) => {

  let link = node.querySelector("a");

  return link ? link.href : null;

};

然后你可以使用里面的功能page.evaluate：

// process.ts

import { getLink } from "../functions";

interface LinkArgs {

  page: puppeteer.Page;

  selector: selector;

}

export const getLinkFromPage = async ({ page, selector }): LinkArgs) =>

  page.evaluate((selector) => {

    const link = getLink(selector); // I'm using the function here.

    return link;

  }, selectors);

问题是当我这样做时，导入在开发过程中失败了。我相信这是因为编译import后export的语法在 chrome 中不起作用。这是我浏览器的错误：

Could not get links.  Error: Evaluation failed: ReferenceError: src_1 is not defined

    at __puppeteer_evaluation_script__:2:20

    at ExecutionContext._evaluateInternal (/Users/harrisoncramer/Desktop/Code/projects/gql3.0_schedulers/node_modules/puppeteer/lib/cjs/puppeteer/common/ExecutionContext.js:217

:19)

    at processTicksAndRejections (internal/process/task_queues.js:97:5)

    at async ExecutionContext.evaluate (/Users/harrisoncramer/Desktop/Code/projects/gql3.0_schedulers/node_modules/puppeteer/lib/cjs/puppeteer/common/ExecutionContext.js:106:16

)

Evaluation failed: ReferenceError: src_1 is not defined

    at __puppeteer_evaluation_script__:2:20

我有一个 hacky 解决方法：我将文件打入编译器，然后从文件中functions.ts删除所有关键字。然后，我从文件中删除所有语句，如下所示：exportfunctions.jsimportprocess.ts

// functions.js

const getLink = (node) => {

  let link = node.querySelector("a");

  return link ? link.href : null;

};

// process.js

    // Turning off this import...

    // import { getLink } from "../functions"; 

interface LinkArgs {

  page: puppeteer.Page;

  selector: selector;

}

然而，这会破坏开发过程中的类型检查！解决这个问题的更好方法是什么？！如何在不破坏 Typescript 类型检查的情况下将已编译的 Javascript 函数导入页面？

Answer 1

它里面的任何东西page.evaluate本质上都是在 Chrome 的 DevTools 控制台中运行的，或者在你这样做时所处的相同上下文中运行。所以导入在这种情况下不起作用，至少不是你尝试的方式。您必须像这样显式地将函数传递到上下文中：const getLink = (node) => {  let link = node.querySelector("a");  return link ? link.href : null;};// process.js    // Turning off this import...    // import { getLink } from "../functions"; interface LinkArgs {  page: puppeteer.Page;  selector: selector;}export const getLinkFromPage = async ({ page, selector }): LinkArgs) =>  page.evaluate((selector, getLink) => {    const link = getLink(selector); // I'm using the function here.    return link;  }, selectors, getLink);