使用rss-parser解析rss订阅「Docusaurus」

多库龙🐲使用rss-parser解析订阅feed，对于一个后端打酱油来说，写前端代码还是有点费劲的。

在 Docusaurus 上使用 rss-parser，对于我来说，这个过程并不是很容易，因为我并擅长React，准确的说不擅长前端。

但是在gpt的加持下，也能照葫芦画瓢哦。

明确问题

要解决的问题：自动解析友链的订阅链接，然后加载文章列表。

首先安装 rss-parser，看一下基本使用

import React, { useState, useEffect } from 'react';
import Parser from 'rss-parser';

const RssFeed = ({ url }) => {
  const [feed, setFeed] = useState(null);

  useEffect(() => {
    const parser = new Parser();
    parser.parseURL(url).then(data => setFeed(data.feed));
  }, [url]);

  return (
    <div>
      {feed && (
        <>
          <h1>{feed.title}</h1>
          <ul>
            {feed.items.map(item => (
              <li key={item.guid}>
                <a href={item.link} target="_blank" rel="noopener noreferrer">
                  {item.title}
                </a>
              </li>
            ))}
          </ul>
        </>
      )}
    </div>
  );
};

export default RssFeed;

引入到 Docusaurus 中，你会发现到处报错。比如：

Module not found: Error: Can't resolve 'http' in '/my-docusaurus-app/node_modules/rss-parser/lib' BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it.
....
ReferenceError: process is not defined (Docusaurus)

这是因为 Webpack 版本的问题：Webpack 5 不再默认包含Node.js核心模块的polyfills。

前端同学可能一下就能明白，我确实找了好久才解决......

参考：

1. https://github.com/codesandbox/sandpack/issues/66
2. https://docusaurus.io/docs/api/plugin-methods/lifecycle-apis#configureWebpack

首先缺少什么就安装什么，然后在配置文件中增加个 webpack 的配置。

plugins: [
function webpack(context, options) {
            /**
             *BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
             */
            return {
                name: 'custom-webpack-plugin',
                configureWebpack(config, isServer, utils) {
                   
                    config.plugins.push(
                        new ProvidePlugin({
                            process: [require.resolve('process')]
                        })
                    );
                    config.plugins.push(
                        new ProvidePlugin({
                            Buffer: ['buffer', 'Buffer']
                        })
                    );
                    return {
                        resolve: {
                            fallback: {
                                http: require.resolve('stream-http'),
                                https: require.resolve('https-browserify'),
                                url: require.resolve('url'),
                                timers: require.resolve('timers-browserify'),
                                stream: require.resolve('stream-browserify'),
                                buffer: require.resolve('buffer'),
                                process: require.resolve('process')
                            }
                        }
                    };
                }
            };
        }

]

接下来就这跨域的问题

在浏览器中直接解析远程 RSS 链接时，可能会遇到跨源资源共享（CORS）问题。

为了解决这个问题，你可以使用代理服务器，如cors-anywhere，来绕过 CORS 限制。

首先使用开发环境的 cors-anywhere，看看如何使用，非常简单哦

开源地址：https://github.com/Rob--W/cors-anywhere

// 使用 cors-anywhere 作为代理
const corsProxy = 'https://cors-anywhere.herokuapp.com/';
const targetUrl = 'https://example.com/api/data';

// 通过 cors-anywhere 代理请求
const proxyUrl = `${corsProxy}/${targetUrl}`;

// 使用 fetch 或 XMLHttpRequest 发送请求
fetch(proxyUrl)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error fetching data:', error));

拿到我们的项目中

const cors_prefix = 'https://cors-anywhere.herokuapp.com';
useEffect(() => {
        let list = [];
        Friends.map(friend => {
            const rssUrl = friend.rss;
            if (rssUrl) {
                parser
                    .parseURL(cors_prefix + '/' + rssUrl)
                    .then(data => {
                        const newFeeds = [...list, data];
                        newFeeds.sort(
                            (a, b) =>
                                new Date(b.items[0].pubDate).getTime() -
                                new Date(a.items[0].pubDate).getTime()
                        );
                        setFeed(newFeeds);
                        list.push(data);
                    })
                    .catch(e => {
                        console.log('解析RSS异常', rssUrl, e);
                    });
            }
        });
    }, []);

但是https://cors-anywhere.herokuapp.com是公共开发测试用的，有访问的限制。所以自托管一个吧。

折腾完上面这些东西，就有点结果了