Typescript + Puppeteer やってみた

概要

PuppeteerをTypescriptで動かしたい!
知識をつけたいので, いろいろ試していこうと思いました!!

リポジトリ

数年ぶりに作った....!
https://github.com/KawamotoShuji/ts_puppeteer_sandbox

構成(WIP)

.
├── crawler
│   ├── base_crawler.ts
│   ├── index.ts
│   └── test_crawler.ts
├── package-lock.json
├── package.json
└── tsconfig.json

とりあえず動かすためにやったこと

package.json作成

package.json

{
  "name": "testtscrawler",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "tsc",
    "lint": "eslint 'crawler/**/*.ts'",
    "lint:fix": "eslint 'crawler/**/*.ts' --fix"
  },
  "author": "KawamotoShuji",
  "license": "ISC",
  "dependencies": {
    "axios": "^0.19.2",
    "dotenv": "^8.2.0",
    "puppeteer": "^5.2.1",
    "ts-node": "^8.10.2",
    "typescript": "^3.9.7",
    "yargs": "^15.4.1"
  },
  "devDependencies": {
    "@types/chai": "^4.2.12",
    "@types/dotenv": "^8.2.0",
    "@types/mocha": "^8.0.1",
    "@types/puppeteer": "^3.0.1",
    "@types/yargs": "^15.0.5",
    "@typescript-eslint/eslint-plugin": "^3.9.1",
    "@typescript-eslint/parser": "^3.9.1",
    "chai": "^4.2.0",
    "eslint": "^7.7.0",
    "eslint-config-prettier": "^6.11.0",
    "eslint-plugin-prettier": "^3.1.4",
    "mocha": "^8.1.1",
    "prettier": "^2.0.5"
  }
}

tsconfig.json作成

{
    "compilerOptions": {
        "target": "es2018",
        "module": "commonjs",
        "outDir": "./target/",
        "removeComments": true,
        "strict": true,
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "noImplicitReturns": true,
        "noFallthroughCasesInSwitch": true,
        "esModuleInterop": true
    },
    "include": [
        "crawler",
        "node_modules/@types/puppeteer/index.d.ts"
    ]
}

npm i

NodeModuleがごりっと出来上がる.

crawlerディレクトリ作って, 中にTSファイル配置

index.ts で処理をキックするようにした.

index.ts

import TestCrawler from './test_crawler';

(async () => {
    const crawler = new TestCrawler();
    await crawler.run();
})();

ベースとなるクローラーのTSファイルを作った.
ヘッドフル大好きなので, デフォルトをヘッドフルにした.

base_crawler.ts

import puppeteer, { Browser } from 'puppeteer';
import { Page } from 'puppeteer';

export interface Crawler {
    run(): Promise<void>;
}

export abstract class BaseCrawler implements Crawler {
    async run(): Promise<void> {
        const browser = await puppeteer.launch(
            { 
                headless: false
            }
        );
        const _page = await browser.newPage();
        await this.crawl(browser, _page);
        await browser.close();
    }

    protected abstract crawl(browser: Browser, page: Page): any;
}

クローリングする実体のクローラーを作った.
うるるに行くようにした.

test_crawler.ts

import { Browser } from 'puppeteer';
import { Page } from 'puppeteer';
import { BaseCrawler } from './base_crawler';

export default class TestCrawler extends BaseCrawler {
    protected async crawl(_: Browser, page: Page) {
        await page
            .goto('https://www.uluru.biz/')
            .then(() => page.waitFor(1000));
    }
}

npm run build

./target/ にコンパイルされたJSファイルが出力される.
こいつらを実行しまくる.

クローラー実行

直下で,
node target/index.js
実行.

うるるにいける.