使用Puppeteer(Headless Chrome)和Vue + Webpack时的依赖性错误

时间:2017-11-09 13:40:58

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

我使用这两个库/模板:

https://github.com/GoogleChrome/puppeteer(无头Chrome)

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但我仍然有依赖错误:

  

找不到这些依赖项:

     
      
  • child_process in ./node_modules/puppeteer/lib/Launcher.js,./node_modules/puppeteer/node6/Launcher.js
  •   
  • fs in ./node_modules/extract-zip/index.js,./node_modules/extract-zip/node_modules/mkdirp/index.js and 18 others
  •   
     

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

节点:我也多次npm install --save child_process fs。同样的错误。

2 个答案:

答案 0 :(得分:1)

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

target: 'node'

from the webpack docs...

  

在上面的示例中,使用node webpack将编译以在类似Node.js的环境中使用(使用Node.js需要加载块而不是触及任何内置模块,如fs或path)。

或者,您可以使用以下内容解决此问题...

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

答案 1 :(得分:1)

您是否尝试捆绑木偶操作员以在浏览器中使用?这是一个特定于节点的模块,我怀疑它是否会在前端工作。相反,您可能会尝试理解为什么要捆绑这个文件,以及这是您打算做什么。