使用Puppeteer时yargs模块出现__dirname未定义错误求助

环境信息 #

• 系统：macOS
• Node版本：v20.12.0
• Angular版本：17.3.2（从缓存路径推断）

代码示例 #

我在Angular组件中尝试引入并启动Puppeteer，代码如下：

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import * as cheerio from 'cheerio';
import * as puppeteer from 'puppeteer';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'qwerty';

  ngOnInit(): void {
    // Example usage of cheerio
    const html = '<div><h1>Hello, World!</h1></div>';
    const $ = cheerio.load(html);
    
    const h1Text = $('h1').text();
    console.log(h1Text); // Output: Hello, World!

    this.runPuppeteer();
  }

  async runPuppeteer() {
    const browser = await puppeteer.launch();
  }
}

运行错误 #

执行代码时出现以下错误：

11:15:52 AM [vite] Internal server error: __dirname is not defined
      at node_modules/yargs/build/index.cjs (/Users/user1/qwerty/node_modules/yargs/build/index.cjs:1:61388)
      at __require2 (/Users/user1/qwerty/.angular/vite-root/qwerty/chunk-JXCON3Y3.mjs:55:50)
      at eval (/Users/user1/qwerty/node_modules/yargs/yargs.mjs:3:17)
      at async instantiateModule (file:///Users/user1/qwerty/node_modules/vite/dist/node/chunks/dep-G-px366b.js:54758:9)
11:15:52 AM [vite] warning:
/Users/user1/qwerty/.angular/cache/17.3.2/vite/deps/puppeteer.js
51171|          try {
51172|            const { href } = (0, url_1.pathToFileURL)(filepath);
51173|            return (yield import(href)).default;
   |                                 ^^^^
51174|          } catch (error) {
51175|            try {
The above dynamic import cannot be analyzed by Vite.
See https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations for supported dynamic import formats. If this is intended to be left as-is, you can use the /* @vite-ignore */ comment inside the import() call to suppress this warning.

  Plugin: vite:import-analysis
  File: /Users/user1/qwerty/.angular/cache/17.3.2/vite/deps/puppeteer.js?v=182ad1e6

我尝试过修改Node模块、用import.meta.url手动赋值__dirname等方法，但都引发了新的问题，希望得到技术支持。

解决方案 #

核心问题说明 #

Puppeteer是Node.js端的自动化工具，依赖Node.js的核心API（如文件系统、进程管理），无法直接在Angular的浏览器端组件中运行——浏览器环境没有__dirname、fs等Node.js专属变量和模块，这是你遇到错误的根本原因。

正确实现方式 #

1. 后端服务调用

   • 搭建一个简单的Node.js后端服务（比如Express），将Puppeteer的代码放在后端接口中。
   • Angular前端通过HTTP请求（如HttpClient）调用后端接口，触发Puppeteer的自动化操作。
   • 示例后端代码（Express）：

     const express = require('express');
     const puppeteer = require('puppeteer');
     const app = express();
     const port = 3000;
     
     app.get('/run-puppeteer', async (req, res) => {
       try {
         const browser = await puppeteer.launch();
         const page = await browser.newPage();
         // 执行你的自动化操作
         await browser.close();
         res.json({ success: true });
       } catch (err) {
         res.status(500).json({ error: err.message });
       }
     });
     
     app.listen(port, () => {
       console.log(`Backend running on port ${port}`);
     });
     

   • Angular前端调用：

     import { HttpClient } from '@angular/common/http';
     // ...
     constructor(private http: HttpClient) {}
     
     async runPuppeteer() {
       const response = await this.http.get('http://localhost:3000/run-puppeteer').toPromise();
       console.log(response);
     }
     

2. Angular SSR（服务器端渲染）

   • 如果需要在Angular项目内部集成，可以使用Angular SSR（比如@angular/ssr），在服务器端的代码中运行Puppeteer。
   • 注意SSR的服务器端代码运行在Node环境中，可以正常使用Puppeteer，但浏览器端仍无法直接调用。

3. 独立Node脚本

   • 将Puppeteer的代码写成独立的Node.js脚本，单独运行，Angular项目通过其他方式（如文件、数据库）获取脚本执行结果。

针对__dirname错误的临时修复（仅适用于Node环境） #

如果在Node环境中遇到__dirname未定义（比如SSR或独立脚本），可以手动定义：

import { fileURLToPath } from 'url';
import { dirname } from 'path';

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

但此方法不适用于浏览器端代码。

内容的提问来源于stack exchange，提问作者ab1428x