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

Question

我正在使用 Puppeteer 在 Typescript 中编写一个网络抓取应用程序。我将一个带有实用函数的 Javascript 文件“附加”到页面实例，以使抓取更容易（这是使用 Pupeteer 的函数完成的，请参阅此处的page.addScriptTagAPI ）。页面上的实用程序功能之一可能如下所示：// functions.tsexport const getLink = (node: Element) => {  let link = node.querySelector("a");  return link ? link.href : null;};然后你可以使用里面的功能page.evaluate：// process.tsimport { 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.jsconst 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);