對于爬蟲，相信大家并不陌生。當(dāng)希望得到一些網(wǎng)站的數(shù)據(jù)并做一些有趣的事時(shí)，必不可少要爬取網(wǎng)頁，用到爬蟲。而目前網(wǎng)絡(luò)上也有很多爬蟲的教程資料，不過又尤以python語言居多。想來自己是做web的，就希望以js的方式解決問題，于是希望利用nodejs。今天介紹一款node的爬蟲利器：Puppeteer。

Puppeteer正如其名“木偶”，它允許我們像牽線木偶一樣操縱它。它是一個(gè)建立在DevTools協(xié)議上的提供控制無頭Chrome或Chromium的高級接口的Node庫。官網(wǎng)上對其應(yīng)用舉了幾個(gè)例子：

• - 生成網(wǎng)頁的截屏（目前僅支持支持jpeg、png格式）和pdf文件
• - 爬取SPA和異步渲染網(wǎng)頁
• - 自動(dòng)表單提交、鍵盤輸入、UI測試等
• - 創(chuàng)建最新的自動(dòng)測試環(huán)境，也就是說可以使用最新的瀏覽器特性
• - 捕獲站點(diǎn)的時(shí)間線以幫助分析性能問題

Puppeteer本質(zhì)上是一個(gè)headless chrome。無頭瀏覽器，相信如果大家做爬蟲肯定有所耳聞。其實(shí)就是一個(gè)沒有UI界面的瀏覽器，它包含了瀏覽器應(yīng)該具有的功能，通常做web測試用，不過做爬蟲也是沒問題的。PhantomJS就提供這樣的功能，基于webkit內(nèi)核，已經(jīng)有好幾年歷史了。不過因?yàn)镻uppeteer有背景（谷歌Chrome團(tuán)隊(duì)開發(fā)），我最后還是選擇了Puppeteer。它們之間的不同點(diǎn)是后者只關(guān)注于Chromium或Chrome。這也導(dǎo)致了最坑的一點(diǎn)是總是綁定最新版本的Chromium。

上面說到Puppeteer會綁定最新版本的Chromium，這意味著每次使用npm i puppeteer安裝使用它時(shí)都會下載最新版本的Chromium，該版本在Windows上大約是130Mb。本來下載npm包就很不易，還要下載一個(gè)一百多兆的東西更是難上加難了。當(dāng)然可以使用cnpm，下圖是我下載的一個(gè)界面?？梢钥吹较螺d了55分鐘，這固然有我網(wǎng)絡(luò)慢的問題，但是能不下載Chromium就盡量不下載了吧。

官網(wǎng)講到可以通過設(shè)置環(huán)境變量或配置npm config的方式避免下載。但設(shè)置環(huán)境變量我一直沒有成功，所以接下來講解配置npm config的方式。PUPPETEER_SKIP_CHROMIUM_DOWNLOAD參數(shù)可以避免下載，所以可以在安裝puppeteer之前使用下面的命令：

npm config set puppeteer_skip_chromium_download = 1

但這樣每次都要敲這個(gè)命令總不是辦法，所以可以將其寫入.npmrc文件中。npm官網(wǎng)講到有四個(gè)影響npm配置的文件，分別是：項(xiàng)目配置文件(/path/to/my/project/.npmrc)、用戶配置文件 (~/.npmrc)、全局配置文件($PREFIX/etc/npmrc)、npm內(nèi)置配置文件(/path/to/npm/npmrc)?？梢允褂?code>npm config list來查看影響npm的配置文件有哪些。不過這里面有個(gè)問題，就是上面的介紹文檔是針對npm最新的6.0版本的。而一般隨nodejs下載的npm版本沒有這么高，只是npm4.x，導(dǎo)致項(xiàng)目中的配置文件不生效。可以從下面兩張圖片看到兩種版本的npm的配置文件的不同（上面一張：npm4.0.2，下面一張npm6.0），可以看到后者多出一個(gè)project config列表。

身為強(qiáng)迫癥的我，當(dāng)然希望直接在項(xiàng)目目錄中更改配置文件了，所以使用下面的命令安裝最新版本的npm：

npm install npm@latest -g

然后在項(xiàng)目目錄下建立.npmrc文件，輸入以下配置命令：

puppeteer_skip_chromium_download = 1

這樣配置之后，就可以跳過下載了，如圖所示：

接著就可以使用它了，以官網(wǎng)的例子為例：

const puppeteer = require('puppeteer');

(async () => {
 const browser = await puppeteer.launch();
 const page = await browser.newPage();
 await page.goto('https://example.com');
 await page.screenshot({path: 'example.png'});

 await browser.close();
})();

以為這樣就完了嗎？不，雖然跳過下載的事情解決了，但是因?yàn)闆]有下載會導(dǎo)致puppeteer無法得知要使用的Chrome或Chromium在哪里，所以還需要指明啟動(dòng)路徑。修改一下：

const puppeteer = require('puppeteer');

(async () => {
 const browser = await puppeteer.launch({
   // headless: false,//不使用無頭chrome模式
   executablePath: 'C:\\Users\\sunbo\\AppData\\Local\\Google\\Chrome\\Application\\chrome.exe',//path to your chrome
 });
 const page = await browser.newPage();
 await page.goto('https://example.com');
 await page.screenshot({path: 'example.png'});

 await browser.close();
})();

更改executablePath參數(shù)指向你本地chrome所在目錄，注意一定要指向chrome.exe才能正常使用。headless參數(shù)也是挺有趣的，如果其值為false，就會真的為我們啟動(dòng)一個(gè)chrome進(jìn)程，讓我們可以可視化整個(gè)程序運(yùn)行的過程。

好了，安裝配置好就可以盡情享受Puppeteer帶給我們的美好世界了。最后說一點(diǎn)，官網(wǎng)例子使用async/await和promise，所以有必要了解這些異步知識，這些東西運(yùn)用好，簡直打開了異步編程的新世界。祝好運(yùn)?。?！

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評論