如何使用Node.js中的Website Scraper克隆网站(下载HTML，CSS，JavaScript，字体和图像)

本文概述

• 1.安装网站爬虫Puppeteer
• 2.创建下载脚本
• 3.运行脚本

作为前端开发人员, 我们决定实施几次第三方网站在我们自己的网站中拥有的某些功能的副本？我通常会做很多事情, 特别是在没有开源替代功能的情况下, 并且我不想从头开始编写它, 因为最终要花费很多时间才能得到一些体面的东西。最简单的方法是读取网页的源代码, 例如在Chrome中使用Ctrl + U, 读取JavaScript文件以及只要文件未压缩就可以(例如在出售模板的网站中)。

这仅在我们谈论代码突出显示时感到不舒服, 因为你无法将浏览器提供的语法突出显示与你最喜欢的IDE提供的语法突出显示(例如Visual Studio Code, Netbeans等)进行比较。因此, 如果你可以下载, 那将是很好的网站代码和资源的副本, 以便在本地进行操作, 对吗？由于使用了Puppeteer的脚本非常有用, 因此可以在短短几分钟(实施后几秒钟)内轻松完成此操作。在本文中, 我们将向你介绍如何使用Node.js轻松实现自己的网站克隆器。

1.安装网站爬虫Puppeteer

使用基于Puppeteer(Chromium的无头版本)的脚本的最有价值的优势之一是, 你不仅可以复制实现纯JavaScript甚至jQuery的静态网站功能, 而且还可以下载由使用React或angular的动态页面生成的内容和资源。在终端中使用npm安装website-scraper-puppeteer库：

npm install website-scraper website-scraper-puppeteer

有关此项目的更多信息, 请访问Github上的官方资源库。此插件基本上以无头模式启动Chromium, 该模式只是打开页面并等待直到整个页面加载完毕。这远非理想, 因为你可能需要等到加载某些资源或单击某个按钮或登录后再进行操作。

2.创建下载脚本

使用NPM将插件安装到你的工作目录后, 你只需创建带有代码的javascript文件即可下载某些网站。创建index.js文件, 并将以下代码放入其中：

// index.js
const scrape = require('website-scraper');
const PuppeteerPlugin = require('website-scraper-puppeteer');
const path = require('path');

scrape({
    // Provide the URL(s) of the website(s) that you want to clone
    // In this example, you can clone the Our Code World website
    urls: ['https://ourcodeworld.com/'], // Specify the path where the content should be saved
    // In this case, in the current directory inside the ourcodeworld dir
    directory: path.resolve(__dirname, 'ourcodeworld'), // Load the Puppeteer plugin
    plugins: [ 
        new PuppeteerPlugin({
            launchOptions: { 
                // If you set  this to true, the headless browser will show up on screen
                headless: true
            }, /* optional */
            scrollToBottom: {
                timeout: 10000, viewportN: 10 
            } /* optional */
        })
    ]
});

前面的代码将导入已安装的库和Node.js路径帮助器(以创建当前目录的绝对路径)。我们将调用scrape方法, 将第一个参数提供一个具有所需配置的对象, 以开始网站克隆。最重要的选项是urls属性, 该属性需要一个字符串数组, 其中每个项目都是你要克隆的网站页面的Web URL。目录选项对应于应放置网站内容的本地目录路径。 plugins选项将为常规抓取程序加载puppeteer插件, 以便正确克隆动态网站。

3.运行脚本

最后, 打开终端并切换到你刚刚编写的脚本的目录并执行：

node index.js

这将克隆所需的网站, 在本例中为”我们的代码世界”。完成后, 你将在脚本的同一目录中找到包含网站的所有JavaScript, HTML和CSS的新目录。例如, 克隆Our Code World将生成类似于以下内容的结构：

./
├── CK7DK53I.json
├── CK7I4KJM;CK7IP27L
├── css/
│   ├── bootstrap.css
│   ├── cookieconsent.min.css       
│   ├── custom.css
│   ├── font-awesome.min.css        
│   ├── magnific-popup.css
│   ├── simple-line-icons.css       
│   ├── slick.css
│   └── style-dark.css
├── favicon.ico
├── fonts/
│   ├── Simple-Line-Icons.eot       
│   ├── Simple-Line-Icons.svg       
│   ├── Simple-Line-Icons.ttf       
│   ├── Simple-Line-Icons.woff      
│   ├── Simple-Line-Icons.woff2     
│   ├── fontawesome-webfont.eot     
│   ├── fontawesome-webfont.svg     
│   ├── fontawesome-webfont.ttf     
│   ├── fontawesome-webfont.woff    
│   ├── fontawesome-webfont.woff2   
│   ├── fontawesome-webfont_1.eot   
│   └── sprite.svg
├── images/
│   ├── articleocw-5c5a2906da73d.jpg
│   ├── articleocw-5c8fb0eab08af.png
│   ├── articleocw-5c8fe4b534e04.jpg
│   ├── articleocw-5cb14f9ea4cfa.png
│   ├── articleocw-5cb1f4b2bd76b.png
│   ├── articleocw-5cdc8d904e6b9.jpg
│   ├── articleocw-5cdde93a04430.png
│   ├── articleocw-5ce040e91c1a8.png
│   ├── articleocw-5d040d2ec3975.png
│   ├── articleocw-5d200b5b06504.png
│   ├── articleocw-5d45c528f0103.webp
│   ├── articleocw-5d69328bac9a2.webp
│   ├── articleocw-5da07b41aa587.png
│   ├── articleocw-5db79e7faa2c5.webp
│   ├── articleocw-5de93b3040ac4.webp
│   ├── articleocw-5e1df41d2e35b.webp
│   ├── articleocw-5e3caa198aab8.webp
│   ├── articleocw-5e3d7b2a01256.webp
│   ├── articleocw-5e3dbabbcff04.webp
│   ├── articleocw-5e3dd0faa3106.webp
│   ├── articleocw-5e4162f1d2db6.webp
│   ├── articleocw-5e418ee7e81b4.png
│   ├── bestfreehtmlcsstemplates_banner_quad.png
│   ├── graph-bg.png
│   ├── hero-slide-1.jpg
│   ├── hero-slide-2.jpg
│   ├── hero-slide-3.jpg
│   ├── home_bg.jpg
│   ├── jobble.png
│   ├── login_register_bg.jpg
│   ├── login_register_bg_1.jpg
│   ├── main-news-banner__bg.jpg
│   ├── mini_ads.png
│   ├── mini_bestfreehtmlcsstemplates.png
│   ├── mini_wrapbootstrap.png
│   ├── ocw_logo_255.png
│   ├── page-heading-pattern.png
│   ├── page-heading.jpg
│   ├── rosterv3_player_01-bg.png
│   ├── single-post-img5.jpg
│   └── team-roster-slider-bg.jpg
├── index.html
├── js/
│   ├── adsbygoogle.js
│   ├── analytics.js
│   ├── bootstrap.bundle.js
│   ├── bsa.js
│   ├── cookie.js
│   ├── cookieconsent.min.js
│   ├── core.js
│   ├── custom.js
│   ├── init.js
│   ├── integrator.js
│   ├── integrator_1.js
│   ├── jquery.min.js
│   ├── monetization.js
│   ├── osd.js
│   ├── pro.js
│   ├── s_83085e49dfeedee6628ee5a7d7cd7359.js
│   └── show_ads_impl_fy2019.js
├── js_1/
├── raw_83a93c31c68198a3762e2237ff33e529.html
├── raw_b54f5852f835e7a023fcacceb1b6473c.html
└── zrt_lookup.html

请确保删除在某些网站中可能找到的广告, 视频和分析工具的所有JavaScript, 以防止JavaScript异常会在克隆的网站中引发异常。

编码愉快！