【nest】puppeteer 使用 addScriptTag 在页面中添加方法的方式
1.js方法支持（已测试）
1.1 先支持js
tsconfig.json
"compilerOptions": {"allowJs": true,...}
1.2 需要将抽离的方法放在js中封装
src/utils/utils.js
export function concatLabel(tagList) {let labels = [];for (let i = 1; true; i++) {let li = tagList.querySelector(`li:nth-child(${i})`);if (li) {labels.push(li.textContent.trim());} else {break; // 当没有更多的 li 元素时，结束循环}}return labels.join('@');
}
1.3 service中使用该方法
import {concatLabel} from "./utils/utils.js";// 将该方法添加为script，因为如果不使用js的话，在页面执行的时候可能会报错
await page.addScriptTag({content: concatLabel.toString()});//使用 await page.$eval('执行页面代码const jobs = await page.$eval('.job-list-box', (el, methodName) => {return [...el.querySelectorAll('.job-card-wrapper')].map(item => {let tagList = item.querySelector('.company-tag-list');console.log("=========================")// 需要添加注解 @ts-ignore 否则编译无法通过// @ts-ignore// 由于该方法已注入页面，因此使用this即可调用let xxxxx = this.concatLabel(tagList);
2.引入 webpack 和 babel 的编译机制（未测试，记录下）
来源： https://www.xiday.com/2019/09/21/puppeteer-run-js/
有时我们可能需要在 Puppeteer 环境中执行一段 JS 代码。
根据官方提供的 API，我们有两种选择，
2.1 一种是添加 script 标签的方式引入 JS。
page.addScriptTag(options)
options <[Object]>
url <[string]> URL of a script to be added.
path <[string]> Path to the JavaScript file to be injected into frame. If path is a relative path, then it is resolved relative to [current working directory].
content <[string]> Raw JavaScript content to be injected into frame.
type <[string]> Script type. Use ‘module’ in order to load a Javascript ES6 module. See script for more details.
returns: <[Promise]<[ElementHandle]>> which resolves to the added tag when the script’s onload fires or when the script content was injected into frame.
2.2 另一种是使用page.evaluate
const result = await page.evaluate(x => {return Promise.resolve(8 * x);
}, 7);
console.log(result); // prints "56"
2.3 说明及遇到的问题
page.addScriptTag虽然可以引用本地文件作为 JS 执行，但是模块系统（ES6 Module 和 CommonJS 等）支持并不完善，部分 ES6 代码不支持 （最新 Chrome 可忽略）。
page.evaluate中的代码相当于在 DevTools 的控制台执行的，同样也有模块系统和 ES6 的问题，只是函数传值比page.addScriptTag方便。
所以我认为最好的解决方式是引入 webpack 和 babel 的编译机制。
具体方案是使用 Webpack Node API 配合 memory-fs 将要执行的 JS 文件作为入口，将编译结果输出为字符串，再通过page.evaluate执行。
2.4 具体方案
2.4.1 安装相关依赖
yarn add webpack memory-fs @babel/core @babel/preset-env babel-loader
2.4.2 编写一个buildModule函数来将指定文件作为入口，将相关模块依赖打包为 JS Bundle 字符串。
const webpack = require('webpack');
const MemoryFS = require('memory-fs');const buildModule = file => {const compiler = webpack({mode: 'development',devtool: 'cheap-module-eval-source-map',entry: require.resolve(file),output: {filename: 'bundle.js',path: '/build',},module: {rules: [{test: /\.m?js$/,exclude: /(node_modules|bower_components)/,use: {loader: 'babel-loader',},},],},});const fs = new MemoryFS();compiler.outputFileSystem = fs;return new Promise((resolve, reject) => {compiler.run(error => {if (error) {reject(error);return;}const content = fs.readFileSync('/build/bundle.js');resolve(content.toString());});});
};
2.4.3在根目录新建babel.config.js来指定打包时的 babel 配置，当然也可以复用项目已有的配置。
babel.config.js
module.exports = {presets: [['@babel/preset-env',{modules: false,useBuiltIns: 'entry',corejs: 3,targets: {chrome: 70,},},],],
};
最后，我们准备需要执行的 JS 入口文件，如果需要执行某些函数，可以将相关模块暴露到 window 对象，供 Puppeteer 使用。在这里我们将自己写的 sum 函数暴露到 window 上。
browser_run.js
import add from 'lodash/add';const sum = (...param) => [...param].reduce((a, b) => add(a, b), 0);window.sum = sum;
最终在 Puppeteer 中调用buildModule函数，传入入口文件路径，经由 webpack 打包和 babel 编译，最后通过page.evaluate函数执行。
const puppeteer = require('puppeteer');(async () => {const browser = await puppeteer.launch();const page = await browser.newPage();const scriptStr = await buildModule('./browser_run.js');await page.evaluate(scriptStr);await page.evaluate(() => {console.log('sum:', window.sum(1, 2, 3, 4, 5));});
})();