寻找有关如何在浏览器中读取 YAML 文件的连贯示例。位于 Web 服务器上的 YAML 文件

Looking for a coherent example on how to read a YAML file in a browser. YAML file located on the web server

我的设置: VS代码+ WSL2。文件都在同一个文件夹中(js-ayml.js、YAML 文件和 index.html)。我通过刷新引用它的页面来 运行 javascript 代码。我使用 GoLive VS 代码扩展作为服务器

    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Test js-yaml</title>
    <script src="//code.jquery.com/jquery-2.1.0.js">
    </script><script src='js-yaml.js'>
    </script><script src='readYaml.js'>
   
</head>
<body>
<h1>Test js-yaml</h1>
<p><a href="https://github.com/nodeca/js-yaml">https://github.com/nodeca/js-yaml</a></p>
</body>
</html>

readYaml.js

(function () {
"use strict";
    $(document).ready(function () {
        $.get('/common/resources/LessonContentsLv01Ln01.yml')
        .done(function (data) {
          console.log('File load complete');
          console.log(jsyaml.load(data));
          var jsonString = JSON.stringify(data);
          console.log(jsonString);
          console.log($.parseJSON(jsonString));
      });
    });
}());

我已经发布了这个Reading YAML from JavaScript in a browser并且它被关闭了。
我试过这个:
https://stackify.dev/804643-reading-from-yaml-file-in-javascript(解决方案 2)
以及此处显示的示例
https://github.com/shockey/js-yaml-browser 这表示此分支针对浏览器进行了优化

它们都因相同的错误而失败

js-yaml.js:9 Uncaught ReferenceError: require is not defined
at js-yaml.js:9:16

那一行是var fs = require('fs'); 据我了解 fs 是一个 node.js 模块,它在浏览器中不起作用

我的问题是是否有一个 JavaScript 模块可以从网络服务器打开和读取 YAML 文件,一个在没有任何后端的情况下在浏览器中运行的模块?

注意:我是初学者,我认为这将是一个基本示例,加载一个文件并解析它。

shockey/js-yaml-browser 坏了,好几年没更新了。 js-yaml总的来说有很多分叉。 Manx7/js-yaml 有效并且是最新的。

.as-console-wrapper { top: 0; max-height: 100% !important; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-yaml/4.1.0/js-yaml.js"></script>
<script>
// Normally we'd use fetch to get the file. However, Whosebug 
// snippets don't have a way to add another file, so we'll use a 
// string instead just to show how the library works.

/*
fetch("sample.yaml")
  .then(response => response.text())
  .then(text => {
    // once the file has been loaded, we can parse it into an object.
    const yaml = jsyaml.load(text);
    console.log(yaml);
  });
*/

const text = `
# Employee records
- martin:
    name: Martin D'vloper
    job: Developer
    skills:
      - python
      - perl
      - pascal
- tabitha:
    name: Tabitha Bitumen
    job: Developer
    skills:
      - lisp
      - fortran
      - erlang
`;

const yaml = jsyaml.load(text);
console.log(yaml);
</script>