// 引入一些需要用到的库以及一些声明
import * as puppeteer from 'puppeteer' // 引入Puppeteer
import mongo from '../lib/mongoDb' // 需要用到的 mongodb库，用来存取爬取的数据
import chalk from 'chalk' // 一个美化 console 输出的库

const log = console.log // 缩写 console.log
const TOTAL_PAGE = 50 // 定义需要爬取的网页数量，对应页面下部的跳转链接

// 定义要爬去的数据结构
interface IWriteData { 
 link: string // 爬取到的商品详情链接
 picture: string // 爬取到的图片链接
 price: number // 价格，number类型，需要从爬取下来的数据进行转型
 title: string // 爬取到的商品标题
}

// 格式化的进度输出 用来显示当前爬取的进度
function formatProgress (current: number): string { 
 let percent = (current / TOTAL_PAGE) * 100
 let done = ~~(current / TOTAL_PAGE * 40)
 let left = 40 - done
 let str = `当前进度：[${''.padStart(done, '=')}${''.padStart(left, '-')}]  ${percent}%`
 return str
}

// 因为我们需要用到大量的 await 语句，因此在外层包裹一个 async function
async function main() {
 // Do something
}
main()

// 进入代码的主逻辑
async function main() {
 // 首先通过Puppeteer启动一个浏览器环境
 const browser = await puppeteer.launch()
 log(chalk.green('服务正常启动'))
 // 使用 try catch 捕获异步中的错误进行统一的错误处理
 try {
  // 打开一个新的页面
  const page = await browser.newPage()
  // 监听页面内部的console消息
  page.on('console', msg => {
   if (typeof msg === 'object') {
    console.dir(msg)
   } else {
    log(chalk.blue(msg))
   }
  })

  // 打开我们刚刚看见的淘宝页面
  await page.goto('https://s.taobao.com/search"text-align: center">

puppeteer.png


2、爬虫的性能问题？
因为Puppeteer会启动一个浏览器，执行内部的逻辑，所以占用的内存是蛮多的，看了看控制台，这个node进程大概占用300MB左右的内存。
我的页面是一个个爬的，如果想更快的爬取可以启动多个进程，注意，V8是单线程的，所以在一个进程内部打开多个页面是没有意义的，需要配置不同的参数打开不同的node进程，当然也可以通过node的cluster(集群)实现，本质都是一样的

我在爬取的过程中也设置了不同的等待时间，一方面是为了等待网页的加载，一方面避免淘宝识别到我是爬虫弹验证码
3、Puppeteer的其它功能
这里仅仅利用了Puppeteer的一些基本特性，实际上Puppeteer还有更多的功能。比如引入node上的处理函数在浏览器内部执行，将当前页面保存为pdf或者png图片。并且还可以通过const browser = await puppeteer.launch({ headless: false })启动一个带界面效果的浏览器，你可以看见你的爬虫是如何运作的。此外一些需要登录的网站，如果你不想识别验证码委托第三方进行处理，你也可以关闭headless，然后在程序中设置等待时间，手动完成一些验证从而达到登录的目的。
当然google制作了一个这么牛逼的库可不只是用来做爬虫爬取数据的，这个库也用作于一些自动化的性能分析、界面测试、前端网站监控等
4、一些其它方面的思考
总得来说制作爬虫爬取数据是一项较为复杂并考察多项基本功的练习项目，在这个爬虫里多次使用到了async，这就需要对async、Promise等相关知识充分的了解。在分析DOM收集数据时，也多次利用了原生的方法获取DOM属性(如果网站有jquery也可以直接用，没有的话需要外部注入，在typescript下需要进行一些配置，避免报错未识别的$变量，这样就可以通过jquery语法操作DOM)，考察了对DOM相关API的熟练程度。
另外这只是一个面向过程的编程，我们完全可以将它封装为一个类进行操作，这也考察了对ES的OOP理解
最后
本文的源代码Github,喜欢的朋友给个star吧


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。