将 Puppeteer (Headless Chrome) 与 Vue + Webpack 一起使用时出现依赖错误答案

【问题标题】：Dependency errors when using Puppeteer (Headless Chrome) with Vue + Webpack将 Puppeteer (Headless Chrome) 与 Vue + Webpack 一起使用时出现依赖错误
【发布时间】：2018-04-22 12:54:11
【问题描述】：

我正在使用这两个库/模板：

https://github.com/GoogleChrome/puppeteer（无头铬）

https://github.com/vuejs-templates/pwa（使用 Webpack 和 Express 的 Vue 模板）。

这是代码：

export default {
  mounted () {
    const puppeteer = require('puppeteer')

    ;(async () => {
      const browser = await puppeteer.launch()
      const page = await browser.newPage()
      await page.goto('https://www.google.com/search?tbm=bks&q=%22this+is%22')
      const result = await page.evaluate(() => {
        const stats = document.querySelector('#resultStats')
        return stats.textContent
      })
      console.log(result)
      await browser.close()
    })()
  }
}

我做了很多次npm install，但我仍然有依赖错误：

未找到这些依赖项：

./node_modules/puppeteer/lib/Launcher.js、./node_modules/puppeteer/node6/Launcher.js 中的子进程

./node_modules/extract-zip/index.js、./node_modules/extract-zip/node_modules/mkdirp/index.js 和其他 18 个中的 fs

要安装它们，您可以运行： npm install --save child_process fs 收听http://localhost:8080

Node：我也做了很多次npm install --save child_process fs。同样的错误。

【问题讨论】：

标签： javascript node.js webpack vue.js puppeteer

【解决方案1】：

这似乎是 webpack 对内置节点模块的抱怨。尝试将以下内容添加到您的 webpack 配置中...

target: 'node'

from the webpack docs...

在上面的示例中，使用 node webpack 将编译以在类似 Node.js 的环境中使用（使用 Node.js 需要加载块并且不接触任何内置模块，如 fs 或 path）。

或者，您可以使用以下方法解决此问题...

node: {
  fs: 'empty',
  child_process: 'empty'
}

【讨论】：

谢谢。现在我得到错误：Uncaught ReferenceError: require is not defined。还有警告in ./node_modules/bindings/bindings.js 81:22-40 Critical dependency: the request of a dependency is an expression
@alex 我编辑了我的答案。尝试删除目标并包含编辑。看起来您正朝着两个捆绑的方向前进，一个用于 Web（vue），一个用于服务器端（使用 puppeteer）。您是否能够提取它们并通过 http 进行通信？例如客户端应用程序现在与运行某种 puppeteer 逻辑的服务器端点通信（想想 rest api）。
感谢您的帮助。我想我们快到了！该应用程序运行但我得到这个Uncaught (in promise) TypeError: Cannot read property 'call' of undefined at Promise (webpack-internal:///10:223:9) at Promise (<anonymous>) at promisified ( 这是违规行：error: nodeFunction.call(null, ...args, callback);
@alex 哇，这正在迅速升级 :D check out this long-running issue 声明使用 dedupeplugin 可能是一个可行的解决方法。你使用的是 webpack 1.x 还是 2.x？
我正在使用 webpack 2 ...所以也许我不能使用这个插件。

【解决方案2】：

您是否尝试捆绑 puppeteer 以在浏览器中使用？这是一个特定于节点的模块，我怀疑它是否可以在前端工作。相反，您可以尝试了解为什么要捆绑此文件，以及您是否打算这样做。

【讨论】：