使用Vue + Webpack使用Puppeteer(无头Chrome)时的依赖性错误
我正在使用这两个库/模板:
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
很多次,但我仍然有依赖错误:
没有find这些依赖关系:
- ./node_modules/puppeteer/lib/Launcher.js中的child_process,./node_modules/puppeteer/node6/Launcher.js
- fs in ./node_modules/extract-zip/index.js,./node_modules/extract-zip/node_modules/mkdirp/index.js和其他18个
要安装它们,你可以运行:npm install –save child_process fs听取http:// localhost:8080
Node:我也做了npm install --save child_process fs
很多次。 同样的错误。
这似乎是webpack关于内置节点模块的抱怨。 尝试添加以下到您的webpackconfiguration…
target: 'node'
从webpack文档…
在上面的例子中,使用节点webpack将在类似于Node.js的环境中进行编译(使用Node.js要求加载块,而不是像fs或path一样接触任何内置模块)。
另外,你可以用下面的方法解决这个问题。
node: { fs: 'empty', child_process: 'empty' }
你是否想在浏览器中捆绑木偶使用? 这是一个特定于节点的模块,我怀疑它会在前端工作。 相反,你可能会试着理解为什么这个文件被捆绑在一起,如果这就是你打算做的。