用Nodejs Cheerio爬取NPM包詳細資訊

SimonWoo發表於2019-05-06
NodeJSNPM

前言

NodeJs是前端開發工程師最熟悉不過的了，下面我就介紹一下如何爬取npm官網的包資料。

爬取資料

  1. init 一個package.json
   npm init -y
複製程式碼
  1. 下載 cheerio、request 和 request-promise
   npm install cheerio && npm install request && npm insatll request-promise
複製程式碼
  1. 新建一個 index.js檔案，程式碼如下
    const rp = require('request-promise');
    const cheerio = require('cheerio');
    
    const getNpmInfo = async ( packageName ) => {
    
      const options = {
        uri: 'https://www.npmjs.com/package/' + packageName,
        transform: body => cheerio.load(body)
      };
    
      const $ = await rp(options);
    
      let infoArray = [];
    
      $('._9dMXo ._2_OuR').each(function() {
        let key, value;
    
        // find 方法獲取 key
        key = $(this).find('._1IKXc').text();
    
        // 下面兩個 key 裡面包含連結要單獨處理
        if(key === 'repository' || key === 'homepage') {
          value = $(this).find('.n8Z-E').find('.zE7yA').attr('href');
        } else {
          value = $(this).find('.n8Z-E').text();
        }
    
        infoArray.push({key, value});
    
      })
    
      console.log(infoArray);
      // return infoArray;
    }
    
    getNpmInfo('webpack-dev-server');
    
    // module.exports = getNpmInfo;
複製程式碼
  1. 終端執行
    node index.js
複製程式碼

會看到控制檯如下圖所示的內容

用Nodejs Cheerio爬取NPM包詳細資訊
這樣你就獲取到了想要的資訊了。

那麼問題來了...

Node環境獲取的資料如何展示在瀏覽器環境裡？

我能想到的辦法就是啟一個服務去接收這個方法，然後返回查詢到的值。

啟動服務

  1. 安裝express
    npm install express --save
複製程式碼
  1. 將index.js修改為如下，就是把這個方法暴露出去
    const rp = require('request-promise');
    const cheerio = require('cheerio');
    
    const getNpmInfo = async ( packageName ) => {
      // ...
      // console.log(infoArray);
      return infoArray;
    }
    
    // getNpmInfo('webpack-dev-server');
    
    module.exports = getNpmInfo;
複製程式碼
  1. 新建 api.js，內容如下
    const express = require('express');
    const getNpmInfo = require('./index');
    const PORT = 8803;
    const app = new express();
    
    app.use('/',  async function(req, res) {
      res.send (await getNpmInfo(req.query.name))
    })
    
    console.log('Serve is run at ' + PORT + ' !')
    
    app.listen(PORT);
複製程式碼
  1. 啟動api.js
    node api.js
複製程式碼
  1. 訪問 localhost:8803/?name=webpack-dev-server 就能看到資料啦！
    用Nodejs Cheerio爬取NPM包詳細資訊

備註：當然如果想正式使用這個介面，那就要放在伺服器上面。

如果有什麼好的方法可以解決資料能夠在瀏覽器展示的問題，歡迎留言討論。

敬上 git 地址： get-npm-package-info 求個?，謝謝

相關文章